html5表单

表单语法

<form  method="post" action="result.html">

   <p>  名字：<input name="name" type="text" >  </p>

   <p>  密码：<input name="pass" type="password" >  </p>

   <p>

      <input type="submit" name="Button" value="提交"/>

      <input type="reset" name="Reset" value="重填“/>

   </p>

</form>

 

 表单元素格式

input  type="text"  name="fname" value="text"/>

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单元素

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

 

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>

<input type="radio" name="gender" id="male"/>

 

placeholder

input类型的文本框提供一种提示（hint）

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型

 

required

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

 

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

常用的表单元素

文本框（text）

密码框（password）

单选按钮（radio）

复选框（checkbox）

列表框（<select>和<option>）

按钮（button、submit和reset）

邮箱（<email>）

网址（<url>）

数字（<number>）

滑块（<range>）

搜索（<search>）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

阅读更多