HTML5之表单

作者: 前端梵风 | 来源:发表于2017-08-06 20:28 被阅读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,表单的知识点很多,要认真学,记得不懂就提问或者搜索。

相关文章

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5表单新验证属性、状态

    HTML5 - 表单新验证属性 HTML5 - 表单新验证状态

  • h5表单

    html5 表单 新增input类型 新增表单元素 html5表单验证 新增表单属性 新增的input类型 inp...

  • HTML5 表单

    @(HTML5)[HTML5表单] [TOC] 七、HTML5表单 新的输入型控件 email:电子邮件 tel:...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • HTML5 表单元素

    HTML5 新的表单元素HTML5有以下新的表单元素 ?:不是所有的浏览器都支持HTML5新的表单元素,但是你...

  • HTML5表单的创建;学习笔记(三)

    HTML5表单的创建

  • HTML5 表单元素

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datali...

  • 响应式布局和CSS3动画

    HTML5 表单类 inputtextpasswordradiocheckboxnumbertelsubmit 提...

  • 2019-10-18 HTML

    1.html新表单元素 HTML5 表单元素 HTML5 增加了如下表单元素: 注释:默认地,浏览器不会显示未知元...

网友评论

    本文标题:HTML5之表单

    本文链接:https://www.haomeiwen.com/subject/slrnlxtx.html