HTML5表单

初始表单

表单标签及表单属性

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

语法

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

post安全性高get安全性低。

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

文本框

文本框用于输入单行的文本信息。
size长度，maxlength字符。

语法

<input type="text">

密码框

将文本框控制件的type属性设置为password，可对输入的数据进行遮挡。

语法

<input type="password">

单选按钮

不与许多个选项，单选按钮用于一组互相排斥的值，用户只能从选项列表中选择一项。

语法

<input tupe="radio"name="sex"value="男">

复选框

可选一个或多个，类型为：checkbox，表单元素：type属性设置为checkbox就可以创建复选框，与单选按钮一样，复选框也可以设置默认值，同样使用checked。

语法

<input type"checkbox"name="language"value="Chinese"checked>

按钮

5.按钮
语法：

<p<input type="button"value="普通按钮"></p >
<p><input type="submit"value="提交按钮"></p >
<p><input type="reset"value="重置按钮"></p >

button按钮：会显示按钮的value值
submit按钮：表单会将数据交到action属性所指定的URL
submit按钮：表单中的数据会被清空
6.文件域：
例子：

<form>
<p><input type-"file"></p >
<p><input type="submit"value="上传"></p >
</form>

7.邮箱
例子：

<form>
<p><input type="email"></p >
<p><input type="submit"value="提交"></p >
</form>

输入错误的邮箱格式 会提示你
8.网址：
例子：

<form>
<p><input type="url"></p >
<p><input type="submit" value="提交"></p >
</form>

输入错误的网址格式 会提示你
9.数字
例子：

<form>
<p><input type="number" min="10" step="2"></p >
<p><input type="submit" value="提交"></p >
</form>

10.滑块
例子：

<form>
<p><input type="range" min="10" max="100" step="10"></p >
<p><input type="submit" value="提交"></p >
</form>

属性：
max：最大值
min：最小值
value：默认值
step：合法数字的间隔
11.搜索框
例子：

<form>
<p><input type="search"></p >
<p><input type="submit" value="提交"></p >
</form>

3.列表框和多行文本域

1.列表框

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

select标签必须包含一个option
sekected属性表示默认选中 但只能有一个
2.多行文本域

<textarea name="taxtarea" cols="显示的宽度" rows="显示的行数">
</textarea>

4.表单的高级应用

1.表单的隐藏域
例子：

<form  method="get">
        
        <p>账号<input type="text" name=""user></p >
        <p>密码<input type=" password" name="pass"></p >
        <p><input type="hidden" value="123" name="userID"></p >
        <p><input type="submit" value="提交"></p >
        

2.表单的只读和禁用
readonly和disabled属性可以实现对账号文本框的只读和禁用
3.表单元素的标注
语法：

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

在选择时文本点击也可以选到

5.表单验证

placeholder属性

 <form>
       
        <p>账号<input type="text"  value="张三" readonly></p >
       </form>

文本框带有提示语 有输入则会被消失
required属性

 <form>
       
        <p>账号<input type="text" required></p >
        <p>input type="submit" value="提交"</p >
       </form>

没有输入任何内容则会提示
pattern属性
当用户输入的内容不符会弹出提示语