QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1455|回复: 29

[系列教程] 0 0 1 8 - 表单 - 设计你的鱼C选课单

[复制链接]
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是 发表于 2017-1-13 11:44:45 145529 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-2-24 13:18 编辑

17中我们了解了文本 & 超链接。

这一帖,学习表单

在H5中,表单类元素有着非常大的改变,功能越来越人性化,就是牛X的意思哈~

简单制作一个鱼C课程预约单,感受下~

先列个单子包含项:

  • 姓名:字符串
  • 性别: 单选框 男 Or 女 Or 其他
  • 电话:数字
  • 邮箱:数字+字符串
  • 预约时间:数字 +字符串
  • 预约课程:下拉框,字符串



  • 创建表单


  • 表单form的作用,就是将数据提交到某个页面,方便进一步数据处理。

    创建,form元素
    1. <form></form>
    复制代码


    创建完,需要添加表单设置method、action属性。

    method,用来指定表单提交数据的方式。

    action,用来指定表单提交的目的页面。

    method属性,中用两种提交方式:post & get

    post,把数据放在数据体内然后再发给后台,数据不能直接被看到,但是传输数据量大

    get,把数据放在URL中,以明文(可看)的方式发送给后台,传输数据量小,不能传输文件类数据。

    说白了,就是get传输数据,会在目标页面显示用户数据很不安全!

    但是,post不会


    所以我们选用post

    然后将数据,提交到fishc_server.php页面,请默认这个页面存在哈,代码如下:
    1. <form method="post" action="fishc_server.php"></form>
    复制代码


    举个例子,假设我们的服务器地址,server.html注意观察地址栏
    1. action="server.html"
    复制代码


    get方式
    1.gif

    1. file:///Users/Blad3/Desktop/HTML5%20/0018/server.html?username=sadasd&sex=female%0D%0A%09%09&tel=123&email=123&date=21313&class=4&rule=on
    复制代码


    看到了吗,你的数据轻易就泄露了!

    post方式
    2.gif

    1. file:///Users/Blad3/Desktop/HTML5%20/0018/server.html
    复制代码


  • 创建姓名、邮箱、电话、时间


  • 先创建姓名输入框,没错就是用老朋友<p>

    使用<input>的type属性,设定文本输入框。

    顺便添加name属性,方便后台调用数据。
    1. <meta charset="utf-8">
    2. <form method="post" action="fishc_server.php">
    3.         <p>姓名:<input type="text" name="username"></p>
    4. </form>
    复制代码

    效果图:
    Snip20170113_249.png


    日常开发中,还有个小技巧

    就是用<label>标签,捆绑姓名和输入框,起到说明还能扩大表单选取范围:
    1. <meta charset="utf-8">
    2. <form method="post" action="fishc_server.php">
    3.         <p><label>姓名:<input type="text" name="username"></label></p>
    4. </form>
    复制代码

    效果图:
    1.gif


    还是有点细节可以优化,input属性还可以加入placeholder占位符,起到提示作用
    1. <meta charset="utf-8">
    2. <form method="post" action="fishc_server.php">
    3.         <p><label>姓名:<input type="text" name="username" placeholder="这位鱼油大帝,您贵姓?"></label></p>
    4. </form>
    复制代码

    效果图:
    2.gif


    因为,表单姓名往往是第一项,从用户体验角度讲直接把光标放在这里,效果会更好,用autofocus属性。
    1. <meta charset="utf-8">
    2. <form method="post" action="fishc_server.php">
    3.         <p><label>姓名:<input type="text" name="username" placeholder="这位鱼油大帝,您贵姓?" autofocus="autofocus"></label></p>
    4. </form>
    复制代码

    效果图:
    1.gif


    这样是不是一下就很砖业

    电话、邮箱、时间同理设置,至于优化,必填项,required属性也是不错,自己DIY吧
    1. <meta charset="utf-8">
    2. <form method="post" action="fishc_server.php">
    3.         <p><label>姓名:<input type="text" name="username" placeholder="这位鱼油大帝,您贵姓?" autofocus="autofocus"></label></p>
    4.         <p><label>电话:<input type="text" name="tel" placeholder="输入您的电话,我们的MM不会骚扰你" required="required"></label></p>
    5.         <p><label>邮箱:<input type="text" name="email" placeholder="输入,有福利~"></label></p>
    6.         <p><label>时间:<input type="text" name="date" placeholder="你想何时上课?"></label></p>
    7. </form>
    复制代码

    效果图:
    1.gif


    在H5中,input元素的type属性,还有很多新的类型:tel、email、date

    这些属性,都会优化移动端的体验,对应把text换成相应的属性
    1. <meta charset="utf-8">
    2. <form method="post" action="fishc_server.php">
    3.         <p><label>姓名:<input type="text" name="username" placeholder="这位鱼油大帝,您贵姓?" autofocus="autofocus"></label></p>
    4.         <p><label>电话:<input type="tel" name="tel" placeholder="输入您的电话,我们的MM不会骚扰你" required="required"></label></p>
    5.         <p><label>邮箱:<input type="email" name="email" placeholder="输入,有福利~"></label></p>
    6.         <p><label>时间:<input type="date" name="date" placeholder="你想何时上课?"></label></p>
    7. </form>
    复制代码


    因为暂时没有传到服务器,所以看不到效果。

    在移动端,打开网页,会根据手机浏览器有相应的变化。


  • 性别


  • 型别因为有三个单选线,用三个radio即可。

    同一组radio,具有相同的type、name。

    radio有自己的value值:女、男、其他。

    因此label标签独立于input元素外,但是为了表示二者关联,用for属性捆绑在一起。

    不理解for也没关系,先知道怎么用,抓住主要矛盾。

    为了,彰显女性地位,放在第一位,并设置checked属性,为默认属性

    看代码:
    1. <p>
    2.                 <label for="sex">性别:</label>
    3.                 <input type="radio" name="sex" value="female
    4.                 " checked>女
    5.                 <input type="radio" name="sex" value="male">男
    6.                 <input type="radio" name="sex" value="other">其他
    7.         </p>
    复制代码

    效果图:
    Snip20170113_252.png


    我们顺便,加一个复选框,当作遵守鱼C规定的按钮:
    1. <p>
    2.                 <label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
    3.         </p>
    复制代码

    效果图:
    1.gif


  • 课程下拉菜单


  • 课程,下拉菜单,用select元素。

    简单列举几个课程(没错,又有小天才养殖场

    Scratch、Python、HTML5、C++、Qt

    然后用数字,1-5代表他们的值,也是for表示二者的联系。

    代码:
    1.         <p>
    2.                 <label for="class">请选择课程</label>
    3.                 <select name="class">
    4.                         <option value="1">Scratch</option>
    5.                         <option value="2">Python</option>
    6.                         <option value="3">C++</option>
    7.                         <option value="4">HTML5</option>
    8.                         <option value="5">Qt</option>
    9.                 </select>
    10.         </p>
    复制代码

    效果图:
    1.gif




最后再加个button,提交表单,剧中center,顺便通过CSS放大:
  1.         <p align="center"><button>劳资要交表啦</button></p>
  2.         <style>
  3.                 button{
  4.                            width:500px;
  5.                         height:66px;
  6.                           }
  7.         </style>
复制代码


最终代码,相信你没问题,给你个最终图:
Snip20170113_258.png






这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅

评分

参与人数 1贡献 +2 收起 理由
alltolove + 2 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
3 
累计签到:411 天
连续签到:1 天
joker11111 发表于 2017-2-20 23:13:24 | 显示全部楼层
本帖最后由 joker11111 于 2017-2-21 00:18 编辑

为毛我看完想到的是MFC的界面,拖个按钮,拖个静态文字,拖个下拉框
哈哈哈哈,乱入乱入,先占个坑,一会交作业

1111.png

看到这儿的童鞋希望大家都动手做一做,你会发现,怎么把form区块的东西居中来着? 怎么来着? 哈哈哈哈哈哈哈哈,回去复习啊啊啊啊!!!

点评

我很赞同!: 5.0
我很赞同!: 5
怎么把form区块的东西居中来着? 怎么来着? 哈哈哈哈哈哈哈哈,回去复习啊啊啊啊!!!  发表于 2017-2-21 06:58

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +6 收起 理由
不二如是 + 6 + 6 + 6 666,后辈楷模

查看全部评分

最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-20 10:19:58 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>form表单</title>
  6.         <link rel="stylesheet" type="text/css" href="0014CSS.css">
  7. </head>
  8. <body>
  9.         <!--<form> 标签用于为用户输入创建 HTML 表单。
  10.         表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
  11.         表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
  12.         表单用于向服务器传输数据。-->
  13.         <div id="container">
  14.         <form method="post" action="">
  15.                 <p><label>用户名:<input type="text" id="userName" placeholder="请输入昵称" required="required" autofocus="autofocus"></label></p><!--placeholder:规定帮助用户填写输入字段的提示。-->
  16.                 <p><label>密码:<input type="password" id="password" placeholder="请输入密码" required="required" autofocus="autofocus"></label></p>
  17.                 <p><label for="sex">性别:<input type="radio" id="sex" name="sex" value="woman" checked="checked">woman<input type="radio" name="sex" value="man">man</label></p><!--<label> 标签的 for 属性应当与相关元素的 id 属性相同。注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。-->
  18.                 <p><label>电话:<input type="tel" name="tel" placeholder="输入您的电话" required="required"></label></p>
  19.                 <p><label>邮箱:<input type="email" name="email" placeholder="输入邮箱,有福利~"></label></p>
  20.                 <p><label>时间:<input type="datetime" name="date" placeholder="预约上课时间"></label></p>
  21.                 <p>
  22.                         <label for="class">请选择课程</label>
  23.                         <select id="class" name="class">
  24.                                 <option value="1">Java</option>
  25.                                 <option value="2">Python</option>
  26.                                 <option value="3">C</option>
  27.                                 <option value="4">HTML5</option>
  28.                                 <option value="5">goLang</option>
  29.                         </select>
  30.                 </p>
  31.                 <p><label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label></p>
  32.                 <button id="button">提交表单</button>
  33.         </form>
  34.         </div>
  35. </body>
  36. </html>
复制代码

  1. @charset "UTF-8";
  2. html,body{
  3.     height: 100%;
  4.     color: #000000;
  5.     font-family: sans-serif, serif,cursive,fantasy,monospace;
  6. }
  7. body{
  8.     background-color: beige;
  9.     margin: 0;
  10.     padding: 0;
  11.     position: relative;
  12. }
  13. #container{
  14.     width: 100%;
  15.     text-align: center;
  16. }
  17. #button{
  18.     font-size: 33px;
  19.     font-family: sans-serif, serif, cursive, fantasy, monospace;
  20.     color: #FFFFFF;
  21.     background-color: aqua;
  22.     width:300px;
  23.     height:66px;
  24.     border:1px solid aqua;
  25.     border-radius: 5px;
  26. }
复制代码
0014.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-20 10:29
最佳答案
5 
累计签到:320 天
连续签到:1 天
时光不老 发表于 2017-5-1 10:49:11 | 显示全部楼层
学习了输入框的各种类型,真的好智能,date那个直接出日历
捕获.PNG

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-1 11:50
最佳答案
30 
累计签到:153 天
连续签到:2 天
MSK 发表于 2017-7-9 16:05:41 | 显示全部楼层
交!作!业!
turtle_看图王.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-9 19:47

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-14 00:53:45 | 显示全部楼层
交作业!
018.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-1-10 17:21

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

最佳答案
39 
累计签到:552 天
连续签到:82 天
alltolove 发表于 2017-1-14 11:33:50 | 显示全部楼层
信息量真大
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是  楼主| 发表于 2017-1-14 11:38:47 | 显示全部楼层


都很简单哈~
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是  楼主| 发表于 2017-2-21 06:58:16 | 显示全部楼层
joker11111 发表于 2017-2-20 23:13
为毛我看完想到的是MFC的界面,拖个按钮,拖个静态文字,拖个下拉框
哈哈哈哈,乱入 ...


只要套路深,铁杵磨成针
最佳答案
3 
累计签到:411 天
连续签到:1 天
joker11111 发表于 2017-2-21 07:45:57 From FishC Mobile | 显示全部楼层
不二如是 发表于 2017-2-21 06:58
只要套路深,铁杵磨成针

这套路刚刚滴
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是  楼主| 发表于 2017-2-21 08:26:04 | 显示全部楼层
最佳答案
3 
累计签到:43 天
连续签到:1 天
mumudontcry 发表于 2017-2-21 09:05:40 | 显示全部楼层
提交到php
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是  楼主| 发表于 2017-2-21 09:15:57 | 显示全部楼层

交给你了~
【包教不包会】
最佳答案
3 
累计签到:43 天
连续签到:1 天
mumudontcry 发表于 2017-2-21 11:36:52 | 显示全部楼层
不二如是 发表于 2017-2-21 09:15
交给你了~
【包教不包会】

=、=讲道理,,,,你这些教程有点简单,不过可能和我初衷差不多吧
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是  楼主| 发表于 2017-2-21 15:16:31 | 显示全部楼层
mumudontcry 发表于 2017-2-21 11:36
=、=讲道理,,,,你这些教程有点简单,不过可能和我初衷差不多吧


由易到难,由难到易
最佳答案
0 
累计签到:56 天
连续签到:1 天
aluominhai 发表于 2017-3-8 20:38:06 | 显示全部楼层
不二,做个视频吧。学生狗愿出50大洋表忠心
最佳答案
120 
累计签到:631 天
连续签到:159 天
不二如是  楼主| 发表于 2017-3-8 23:02:13 | 显示全部楼层
aluominhai 发表于 2017-3-8 20:38
不二,做个视频吧。学生狗愿出50大洋表忠心

谢谢支持,比起讲段子

更喜欢写段子
最佳答案
0 
累计签到:28 天
连续签到:1 天
未来肌肉男 发表于 2017-6-25 17:39:41 | 显示全部楼层
本帖最后由 未来肌肉男 于 2017-6-25 17:41 编辑


交作业啦!!!!!!
表单.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-6-25 17:42

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 加油~

查看全部评分

最佳答案
1 
累计签到:41 天
连续签到:1 天
星空·无限 发表于 2018-1-10 17:19:43 | 显示全部楼层
本帖最后由 星空·无限 于 2018-1-10 17:22 编辑

QQ截图20180110172045.png
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <div style="background:#ffff00">
  12.         <form action="" align="center">
  13.             <p><label>姓名: <input type="text" name="userName" placeholder="你妈贵姓啊!" autofocus="autofocus"></label></p>
  14.             <p><label>电话: <input type="tel" name="tel" placeholder="卖身联系电话"></label></p>
  15.             <p><label>邮箱: <input type="email" name="email"></label></p>
  16.             <p><label>时间: <input type="date" name="date" ></label></p>
  17.             <p>
  18.                 <label for="sex">性别:</label>
  19.                 <input type="radio" name="sex" value="a">女
  20.                 <input type="radio" name="sex" value="b" checked>男
  21.                 <input type="radio" name="sex" value="c">其他
  22.             </p>
  23.             <p>
  24.                 <label for="class">独卖小件</label>
  25.                 <select name="class" id="">
  26.                     <option value="1">javascript</option>
  27.                     <option value="2">python</option>
  28.                     <option value="3">java</option>
  29.                 </select>
  30.             </p>
  31.             <p><label><input type="checkbox" name="d" >同意卖身协议</label></p>
  32.             <p align="center" style="background: aqua"><button>劳资要卖身让开</button></p>
  33.             
  34.         </form>
  35.     </div>
  36. </body>
  37. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-1-10 17:20

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

最佳答案
0 
累计签到:93 天
连续签到:3 天
likesunshine 发表于 2018-3-11 16:44:15 | 显示全部楼层
刚开始学,自己还是写不出来啊,只能根据楼上照猫画虎来一个
360截图20180311164407451.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-3-11 17:06

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-4-27 00:57

快速回复 返回顶部 返回列表