Web前端之路

HTML5之表单

2017-08-06  本文已影响10人  前端梵风

在网站中,表单是指收集用户的信息。

一,表单控件

1.文本框:单行文本框(Text input),密码框(PassWord input),文本域(Text area)。

2.选择:单选按钮(Radio buttons),复选按钮(Checkboxes),下拉列表(Drop-downboxes)。

3.提交表单:提交按钮(Submit button),图像按钮(Image buttons)。

4.上传文件:允许用户把文件上传到网站。

二,表单结构

1.<form>:表单控件位于<form>元素中。

2.action:用于指向服务器上一个页面的URL。

3.method:表单的提交方法之一:get或post。

三,单行文本框、

1.<input>:用来创建不同的表单控件。

2.type="text":创建一个单行文本框。

3.name:这个特性的值对应表单控件。

4.maxlength:限制用户在文本框输入的最大字符量。

四,密码框

1.<input>:上面我们提到了这是用来创建不同的表单控件。

2.type="password",,这里也会创建一个文本框,不同的是,输入的字符将会被隐藏。

3.name:与上同理。

4.maxlength:同样是限制用户输入的最大字符量。

五,多行文本框

1.<textarea>:用来创建多行文本框。

六,单选按钮

1.<input>:自行脑补上面的内容哈。

2.name:一个系列的单选按钮应该用同样的name。

3.value:每一个的单选按钮的value都应该不同。

4.checked:就是网页在加载后显示那个按钮被选中,用户不能更改。

七,复选框

1.type="checbox":允许用户选中多个或取消。

2.name:同上原理。

3.value:同理哈,要认真看。

4.checked:同理哈。

八,下拉列表框

1.<select>:用来创建下拉列表框。

2.name:指明表单控件的名称。

3.<option>:用来指定用户可以选择的选项,注意:每个选项都应该有<option>。

4.value:指定选项的值。

5.selected:指定页面在加载时被选中的选项,注意:只能选一个选项。

九,多选框

1.<select>:用来创建多选框。

2.size:size的值是一次显示的选项的数量。

3.multiple:允许用户选多项。

十,文件上传域

1.<input>

2.type="file":会创建一个带有browse按钮的控件。

十 一,提交按钮

1.<input>

2.type="submit":创建一个提交按钮。

3.value:用来控制按钮上的文字。

十二,图像按钮

1.<input>

2.type="image":用来创建一个图像按钮。

3.要用到图像,必少不了src。

4.width  height:控制图像的宽度和高度。

十三,按钮和隐藏控件

1.<button>创建按钮。

2.<input type="hidden">:隐藏表单控件,不会显示在用户的页面上。

十四,标签表单控件

1.<label>:在表单控件旁边使用它,可以说明白表单控件的作用。

2.for:它用来表明标签控件是对应哪个表单控件的。

十五,组合表单元素

1.<fieldset>:可将相关表单控件置于一组。

2.<legend>:包含一个标题。

十六,日期控件

1.<input type="data">:将创建一个日期控件,要求用户输入日期。

十七,电子邮件控件

1.<input type="email">:将创建一个电子邮件控件,用户必须输入正确的邮箱地址。

十八,URL输入控件

1.<input type="url">:将创建一个URL控件,用户必须输入正确的URL地址。

十九,搜索输入控件

1.<input type="search">:将创建一个搜索输入控件。

2.placeholder:文本框显示的内容,占位。

OK,表单的知识点很多,要认真学,记得不懂就提问或者搜索。

上一篇 下一篇

猜你喜欢

热点阅读