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>

method规定如何发送表单数据        action表示向何处发送表单数据

二，表单元素

1.文本框

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

2.密码框

<input  type="password"  name="userPwd" value="密码" size="30" maxlength="20" />

3.单选按钮

<input  type="radio"  name="gen" value="男" checked />男

<input  type="radio"  name="gen" value="女"  />女

checked按钮选中状态

4.复选框

<input  type="checkbox"  name="gen" value="sport" checked />运动

<input  type="radio"  name="gen" value="talk"  />聊天

<input  type="radio"  name="gen" value="play"  />游戏

5.列表框

<select name="列表名称" size="行数">

       <option value="选项的值" selected="selected">…</option >

       <option value="选项的值">…</option >

</select>

6.图片按钮

<input  type="reset" name="butReset" value="reset按钮">

<input  type="submit" name="butSubmit" value="submit按钮">

<input  type="button" name="butButton" value="button按钮"/>

<input  type="image"  src="images/login.gif" />

7.多行文本域

<textarea name="showText" cols="x" rows="y">文本内容</textarea>

8.文件域

<form action="#" method="post" enctype="multipart/form-data">

        <p>

                <input type="file" name="files"/>

                <input type="submit" name="upload" value="上传"/>

        </p>

<form>

9.邮箱

<input type="Email" name="email"/>

10.网址

<input type="url" name="userUrl"/>

11.数字

<input type="number" name="num" min="0" max="100" step="10"/>

step合法的数字间隔

12.滑块

<input type="range" name="range1" min="0" max="10" step="2"/>

13.搜索框

<input type="search" name="sousuo"/>

三，表单的高级应用

1，隐藏域

<input type="hidden" value="666" name="userid">

2，只读

<input name="name" type="text" value="张三"  readonly>

3，禁用

<input type="submit "  disabled   value="保存" >

4，表单元素的标注

增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上

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

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

5，表单的初级验证

1）placeholder(占位符)

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

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

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

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

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

2)required

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

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

<input type="text" name="username"  required/>

3)pattern

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

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