上节课我们了解了文本超链接。
这一帖，学习表单。
在H5中，表单类元素有着非常大的改变，功能越来越人性化，就是牛X的意思哈～
简单制作一个鱼C课程预约单，感受下～
先列个单子包含项：
姓名：字符串
性别：单选框男Or女Or其他
数字
邮箱：数字+字符串
预约时间：数字+字符串
预约课程：下拉框，字符串
创建表单
表单form的作用，就是将数据提交到某个页面，方便进一步数据处理。
创建，form元素
form/form创建完，需要添加表单设置method、action属性。
method，用来指定表单提交数据的方式。
action，用来指定表单提交的目的页面。
method属性，中用两种提交方式：postget
post，把数据放在数据体内然后再发给后台，数据不能直接被看到，但是传输数据量大
get，把数据放在URL中，以明文（可看）的方式发送给后台，传输数据量小，不能传输文件类数据。
说白了，就是get传输数据，会在目标页面显示用户数据很不安全！
但是，post不会
所以我们选用post
然后将数据，提交到fishc_server.PHP页面，请默认这个页面存在哈，代码如下：
formmethod="post"action="fishc_server.PHP"/form
举个例子，假设我们的服务器地址，server.html，注意观察地址栏
action="server.html"get方式：
file:///Users/Blad3/Desktop/HTML5%20//server.html?username=sadasdsex=female%0D%0A%09%09tel=email=date=class=4rule=on
看到了吗，你的数据轻易就泄露了！
post方式：
file:///Users/Blad3/Desktop/HTML5%20//server.html
创建姓名、邮箱、电话、时间
先创建姓名输入框，没错就是用老朋友p
使用input的type属性，设定文本输入框。
顺便添加name属性，方便后台调用数据。
metacharset="utf-8"
formmethod="post"action="fishc_server.PHP"
p姓名：inputtype="text"name="username"/p
/form
效果图：
日常开发中，还有个小技巧
就是用label标签，捆绑姓名和输入框，起到说明还能扩大表单选取范围：
metacharset="utf-8"
formmethod="post"action="fishc_server.PHP"
plabel姓名：inputtype="text"name="username"/label/p
/form
效果图：
还是有点细节可以优化，input属性还可以加入placeholder占位符，起到提示作用
metacharset="utf-8"
formmethod="post"action="fishc_server.PHP"
plabel姓名：inputtype="text"name="username"placeholder="这位鱼油大帝，您贵姓？"/label/p
/form
效果图：
因为，表单姓名往往是第一项，从用户体验角度讲直接把光标放在这里，效果会更好，用autofocus属性。
metacharset="utf-8"
formmethod="post"action="fishc_server.PHP"
plabel姓名：inputtype="text"name="username"placeholder="这位鱼油大帝，您贵姓？"autofocus="autofocus"/label/p
/form
效果图：
这样是不是一下就很砖业了
电话、邮箱、时间同理设置，至于优化，必填项，required属性也是不错，自己DIY吧
metacharset="utf-8"
formmethod="post"action="fishc_server.PHP"
plabel姓名：inputtype="text"name="username"placeholder="这位鱼油大帝，您贵姓？"autofocus="autofocus"/label/p
plabelinputtype="text"name="tel"placeholder="输入您的电话，我们的MM不会骚扰你"required="required"/label/p
plabel邮箱：inputtype="text"name="email"placeholder="输入，有福利～"/label/p
plabel时间：inputtype="text"name="date"placeholder="你想何时上课？"/label/p
/form
效果图：
在H5中，input元素的type属性，还有很多新的类型：tel、email、date
这些属性，都会优化移动端的体验，对应把text换成相应的属性
metacharset="utf-8"
formmethod="post"action="fishc_server.PHP"
plabel姓名：inputtype="text"name="username"placeholder="这位鱼油大帝，您贵姓？"autofocus="autofocus"/label/p
plabelinputtype="tel"name="tel"placeholder="输入您的电话，我们的MM不会骚扰你"required="required"/label/p
plabel邮箱：inputtype="email"name="email"placeholder="输入，有福利～"/label/p
plabel时间：inputtype="date"name="date"placeholder="你想何时上课？"/label/p
/form
因为暂时没有传到服务器，所以看不到效果。
在移动端，打开网页，会根据手机浏览器有相应的变化。
性别
型别因为有三个单选线，用三个radio即可。
同一组radio，具有相同的type、name。
radio有自己的value值：女、男、其他。
因此label标签独立于input元素外,但是为了表示二者关联，用for属性捆绑在一起。
不理解for也没关系，先知道怎么用，抓住主要矛盾。
为了，彰显女性地位，放在第一位，并设置checked属性，为默认属性
看代码：
p
labelfor="sex"性别:/label
inputtype="radio"name="sex"value="female
"checked女
inputtype="radio"name="sex"value="male"男
inputtype="radio"name="sex"value="other"其他
/p
我们顺便，加一个复选框，当作遵守鱼C规定的按钮：
p
labelinputtype="checkbox"name="rule"required="required"遵守鱼C相关规定/label
/p
课程下拉菜单
课程，下拉菜单，用select元素。
简单列举几个课程
（没错，又有小天才养殖场）
Scratch、Python、HTML5、C++、Qt
然后用数字，1-5代表他们的值，也是for表示二者的联系。
代码：
p
labelfor="class"请选择课程/label
selectname="class"
optionvalue="1"Scratch/option
optionvalue="2"Python/option
optionvalue="3"C++/option
optionvalue="4"HTML5/option
optionvalue="5"Qt/option
/select
/p
效果图：
最后再加个button，提交表单，剧中center，顺便通过CSS放大：
palign="center"button劳资要交表啦/button/p
style
button{
width:px;
height:66px;
}
/style
最终代码，相信你没问题，给你个最终图：
如果喜欢本系列HTML帖子
欢迎到鱼C论坛订阅专辑?
HTML5-庖丁解牛
戳原文，更有料！赞赏
转载请注明：http://www.guyukameng.com/aspnet/2019-11-09/11057.html