HTML和HTML5表单属性

1、文本域 (text)。(name属性值要相同)

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

2、密码域 (password)。（name属性值要相同）

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

3、单选框（radio）。

注意：默认选择哪个就在哪个域里写入checked="checked"。

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

4、复选框（checkbox）。

注意：默认选择哪个就在哪个域里写入checked="checked"。

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

5、简单的下拉列表。（预选在预选的那行之后面加selected）

定义列表中的选项用<option>标签

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

6、<optgroup> 标签

<optgroup> 标签经常用于把相关的选项组合在一起。 

如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>

7、<datalist> 标签

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

8、创建一个文本框。（10行*30列）

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

9、创建一个按钮。

<form action="">
<input type="button" value="Hello world!">
</form>

10、创建带标题的框。

<form action="">
<fieldset>  //定义围绕表单中元素的边框。
<legend>标题:</legend>   //定义 fieldset 元素的标题。
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

11、自带文本域和输入域的表单。

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
                                               //value的值就是自带的值
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

12、发送邮箱的表单。

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

• autocomplete：填写并提交表单，然后重新刷新页面查看如何自动填充内容。注意 form 的                           autocomplete 属性为 "on"（开），但是 e-mail 自动为“off”（关）。
• novalidate：novalidate 属性规定在提交表单时不应该验证 form 或 input 域。（比如e-mail）

<input>新属性：

• autofocus：

   autofocus 属性规定在页面加载时，域自动地获得焦点。
                          （进入页面，自动选中这个框）

  

• form：属性规定输入域所属的一个或多个表单。点击提交，输出结果是

  

  First name:两列
  Last name:嗯嗯 
• formaction：

  formaction 属性用于描述表单提交的URL地址.

  formaction 属性会覆盖<form> 元素中的action属性.

  注意: The formaction 属性用于 type="submit" 和 type="image".

• formenctype：

  formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

  formenctype 属性覆盖 form 元素的 enctype 属性。

  主要: 该属性与 type="submit" 和 type="image" 配合使用。

• formmethod：

  formmethod 属性定义了表单提交的方式。

  formmethod 属性覆盖了 <form> 元素的 method 属性。

  注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

• formnovalidate：

  novalidate属性描述了 <input> 元素在表单提交时无需被验证。

  formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

  注意: formnovalidate 属性与type="submit一起使用

• formtarget：

  formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

  formtarget 属性覆盖 <form>元素的target属性.

  注意: formtarget 属性与type="submit" 和 type="image"配合使用.

• height 与 width：

  height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

  注意: height 和 width 属性只适用于 image 类型的<input> 标签。

• list：list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
   
• min 与 max：min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
• multiple：

  multiple 属性规定<input> 元素中可选择多个值。

  注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file
   

  

• pattern (regexp)：pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
  （例如，这个输入框显示了一个只能包含三个字母的文本域（不含数字及特殊字符），超出则会提示请与请求的格式匹配)
• placeholder：

  placeholder 属性提供一种提示（hint），描述输入域所期待的值。

  简短的提示在用户输入值前会显示在输入域上。
   

  

• required：required 属性规定必须在提交之前填写输入域（不能为空）。

  

• step：

  step 属性为输入域规定合法的数字间隔。

  如果 step="3"，则合法的数是 -3,0,3,6 等（间隔步长为3）

  提示： step 属性可以与 max 和 min 属性创建一个区域值.