HTML5第三章

3.1初始表单

3.1.1 表单标签及单属性

<form>标签 创建表单，以实现用户信息的收集和传递。

 <form action=“URL地址”method=“提交方式”>
     <!--各种表单控件-->
 </form>

<form>标签action和method是两个常用属性。
post方法提交表单的方式不会改变浏览器地址栏的状态，表单数据也不会被显示在地址栏中。
get方法提交表单的方式，浏览器地址栏的状态会发生改变，该方法会将表单提交的数据在URL中清晰地显示出来。

3.1.2 <input>标签的常用属性及格式

input用于收集用户信息，拥有多种输入类型

1.文本框

<input type=“text”>

2.密码框

将文本框控件的typs属性设置为password，可对输入的数据。

<input type="password">

3.单选按钮

<form>
  性别：
   <input type=“rape” name=“sex” value=“男”/>男
   <input type=“radio” name=“sex” value=“女”/>女

4.复选框

复选框是一定数目选取一个或多个，其类型为checkbox，即把表单元素的type属性设置为checkbox就可以创建复选框。

5.按钮
语法

<input type=“button” value=“普通按钮”>
<input type=“submit” value=“提交按钮”>
<input type=“reset” value=“重置按钮”>

button按钮：button按钮属于普通按钮，要与事件关联使用。
submit按钮：reset按钮属于重置按钮，当用户单击该按钮后，表单会将数据提交到action属性所指定的URL。
reset按钮：reset按钮属于重置按钮，当用户单击该按钮后，表单中的数据将被清空。

6.文件域

文件上传，在使用时将<input>标签的type属性设置为file即可创建文件，创建完后可以上传文本，图片。

7.邮箱

email类型的input元素是一种专门用于输入邮箱的文本框。

8.网址

url类型的inupt元素是一种专门用于输入URL地址的文本框。

<form>
     <p>网址：<input  type=“url”></p>
     <p><input  type=“submit” value="提交"></p>

9.数字

number类型的input元素提供用于输入数字的文本框。
| 属性 | 属性值 |描述|
|max|number|规定允许的最大值
| min | number |规定允许的最小值
| value | number |规定的默认值
|step|number|规定输入字段的合法数字间隔

10.滑块

range类型的input元素提供用于输入包含一定范围的数值的文本框。

11.搜索框

search类型的input元素提供用于输入搜索框。
这种搜索框与text类型的input元素提供的文本框。

3.1.3 列表框和多行文本域

1.列表框

列表框用于提供一组数据项，它是通过<select>标签和<option>标签实现的。

<select name="指定列表名称">
    <option valeue="可选项的值"selected=“selected”>......</option>
    <option valeue="可选项的值">......</option>
    <option valeue="可选项的值">......</option>
    ......
</select>

2.多行文本域

<textarea name="textarea" cols=“显示的宽度”rows=“显示的行数”>
  文本内容
</textarea>

3.2表单的高级应用

3.2.1表单的隐藏域

type属性值设置为hidden隐藏类型即可创建隐藏域。
隐藏域常用于隐藏用户信息，确定用户身份。

3.2.2 表单的只读与禁用

表单元素设置了只读（readonly）属性或禁用（disabled）属性。

3.2.3 表单元素的标注

<label for=“表单元素的id”>标注的文本</label>

3.3.1 placehoder属性

placehoder属性适用的input类型有text，search，url，email和password。

3.3.2 required属性

属性响用的input类型有text，password，email，search，url，number，checkbox，radio，file。