表单

 表单：提交数据

 一.表单的基本语法：

      <!--
                method:指定表单提交的方式
                post:表单提交时会在页面地址栏中显示提交地址
                get:表单提交时会在页面地址栏中显示提交地址和表单提交信息
                action:代表表单提交的地址
            -->
      <form method="post/get" action="表单提交的地址">
       

      </form>

 二.表单元素格式
      type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
      name 指定表单元素的名称
      value 元素的初始值。type 为 radio时必须指定一个值
      size 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。
对于其他类型，宽度以像素为单位
      maxlength type为text 或 password 时，输入的最大字符数
      checked type为radio或checkbox时，指定按钮是否是被选中

    1.text:文本框
       <input type="text" name="username" value="admin" size="30" maxlength="15" />

       注意：
        1.当type取值为text时为文本框，name属性是必须的，其他几个属性并不是必须的，
其他几个属性将根据表单需要而设置
6
    2.password:密码框
       <input type="password" name="userpwd" value="" size="30" maxlength="15">

       注意：
        1.当type取值为password时为密码框，name属性是必须的，其他属性并不是必须的，
实际开发中通常不设置value初始值。

 

    3.radio:单选按钮
       注意：name值相同时只能选中一个单选按钮
       <!--checked:默认选中-->
       <input type="radio" name="sex" value="男" checked/>男
       <input type="radio" name="sex" value="女" />女

       注意：
        1.当type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的。
        2.同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
        3.同一组单选按钮只能有一个默认的checked属性

    4:checkbox:复选框:都能选中
       <input type="checkbox" name="interest" value="playgames" checked/>玩游戏
          <input type="checkbox" name="interest" value="swimeing"/>游泳
          <input type="checkbox" name="interest" value="ball"/>玩球

          注意：
           1.当type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的
           2.同一组复选框，根据需要可设置name属性值相同，也可不同
           3.同一组复选框中允许有多个复选框有默认的checked属性

    5::select   -- option：下拉列表

       <select name="city" size="3">
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>

       </select>

      注意：

      1.一个<select>中至少包含一下<option>。
      2.name和value属性是必须的，其他属性并不是必须的。
      3.一个列表框中只能有一个列表项默认被选中。

    6.按钮：
      button：普通按钮
         <input type="button" name="btn" value="普通按钮"/>
      reset：重置按钮：初始化表单信息
            <input type="reset" name="reset" value="重置按钮"/>
      submit:提交表单中输入的信息
            <input type="submit" name="submit" value="提交按钮"/>
      image:图像按钮：跟submit作用相同
            <input type="image" src="../images/login.gif"/>
    7.文件域：
      <form method="post" action="" enctype="multipart/form-data">
       <input type="file" name="filename"/>
       <input type="submit" name="submit" value="提交表单信息" />
      </form>

      注意：在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，
表示将表单数据分为多部分提交

    8.邮箱：提交时验证邮箱格式是否正确
      <input type="email" name="email"/>

    9.网址：提交时验证网址格式是否正确
      <input type="url" name="url"/>

    10.数字：提交时必须符合大于等于最小值小于等于最大值，且每次增长step的值
      <input type="number" min="1" max="10" step="2"/>

    11.滑块：提交时必须符合大于等于最小值小于等于最大值，且每次增长step的值
      <input type="range" name="range" min="0" max="100" step="2"/>

    12.搜索框
        搜索框：<input type="search" name="search"/>
    13.隐藏域
        
         隐藏域:<input type="hidden" name="hidden" value="123"/>

    14.只读
         只读:<input type="text" name="name" value="张三" readonly/>

    15.禁用
         禁用:<input type="submit" name="submits" value="提交" disabled/>

    16.表单元素的标注
      for的值跟定位文本框id的值保持一致
         <label for="textfor">标注</label>
         <input type="text" name="textfors" id="textfor" value="呵呵"/>
    17.表单验证：
       1.为了减轻服务器的压力
       2.保证数据的可行性和安全性

      17.1.placeholder:
          input类型的文本框提供一种提示（hint）
          可以描述文本框期待用户输入何种内容
          提示语默认显示，当文本框中输入内容时提示语消失
          适合于input标签：text、search、url、email和password等类型
          <input type="text" placeholder="请输入用户名" name="username" value="" size="20" maxlength="16" required/><br/>
      17.2.required:
          规定文本框填写内容不能为空，否则不允许用户提交表单
          适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
          <input type="text" placeholder="请输入用户名" name="username" value="" size="20" maxlength="16" required/><br/>
      17.3.pattern
          用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
          <input type="text" name="phone" required pattern="^1[358]d{9}"/>