表单主要用来制作动态网页，方便和用户进行交互

常用的表单元素：

文本框（text）
密码框（password）
单选按钮（radio）
复选框（checkbox）
列表框（<select>和<option>）
按钮（button、submit和reset）
邮箱（<email>）
网址（<url>）
数字（<number>）
滑块（<range>）
搜索（<search>）  

表单语法：
<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>
规定如何发送表单数据
常用值：get  | post
在实际网页开发中通常采用post方式提交表单数据
   1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
   2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
   3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
   4. Get执行效率却比Post方法好。Get是form提交的默认方法。 

 

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

密码框：<input  type="password "  name="pass"  size="20" />

单选按钮：<input name="gen" type="radio" value="男"  checked  />男
               <input name="gen" type="radio" value="女" />女

复选框：<input type="checkbox" name="interest" value="sports"/>运动
           <input type="checkbox" name="interest" value="talk" checked />聊天
           <input type="checkbox" name="interest" value="play"/>玩游戏


列表框：<select name="列表名称" size="行数">
           <option value="选项的值" selected="selected">…</option >
           <option value="选项的值">…</option >
        </select>

图片按钮：<input  type="image"  src="images/login.gif" />
重置按钮：<input  type="reset" name="butReset" value="reset按钮">
提交按钮：<input  type="submit" name="butSubmit" value="submit按钮">
普通按钮：<input  type="button" name="butButton" value="button按钮"/>

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

文件域：<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

邮箱：<p>邮箱:<input type="email"  name="email"/></p>
               <input type="submit"/>

网址：<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
              <input type="submit"/>

数字：<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
         <input type="submit"/>

滑块：<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>

搜索框：<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>

表单的应用

1.隐藏域
2.只读
3.禁用

4.表单元素的标注

隐藏域：<input type="hidden" value="666" name="userid">


只读文本框：<input name="name" type="text" value="张三"  readonly>


禁用：<input type=“submit ”  disabled value="保存" >


表单元素的标注：<label for="id">标注的文本</label>
                       <input type="radio" name="gender" id="male"/>

表单初级验证的方法

1.placeholder
2.required
3.pattern

placeholder：<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型



required：<input type="text" name="username"  required/>
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型



pattern：<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单