form表单总结

• 按钮类：

      <form action="#" method="get"><!--action为提交地址，method为提交方式，get显式，post隐式-->
          <input type="submit" value="提交" name="submit" /> <!--提交按钮，点击时提交相应数据-->
          <input type="button" value="按钮" name="button"/>  <!--普通按钮，单独使用时点击无任何效果-->
          <input type="image" src="item_1.png" name="image"/><!--图片按钮，作用与提交按钮相同--> 
          <input type="reset" value="重置" name="reset" />   <!--重置按钮，点击重置输入的内容-->
      </form>

   

• 文本类：

      <form action="#" method="get">
      
          <input type="text" value="在此输入" name="text" />  <!--单行文本输入，多用于用户名输入-->
          <input type="password" value="   " name="password" /><!--密码输入，输入内容不可见-->
          <input type="hidden" value="yincang" name="hidden" /><!--隐藏域，在网页上并不显示-->
          <textarea rows="5" name="textarea">请输入你想说的话</textarea><!--文本域输入，rows规定行数-->
          
      </form>

   

• 选择类：
  • 单选：

        <form action="#" method="get">
            男<input type="radio" value="male" name="sex" checked="checked" />
            女<input type="radio" value="female" name="sex" />        
        </form>
            <!--同组单选按钮必须name值相同，checked为默认选项-->

     

  • 复选：

        <form action="#" method="get">
            苹果<input type="checkbox" value="apple" name="fruit" checked="checked" />
            香蕉<input type="checkbox" value="banana" name="fruit" />
            桔子<input type="checkbox" value="orange" name="fruit" />    
        </form>
            <!--同组按钮name值相同，checked为默认选项-->

     

  • 下拉列表:

        <form action="#" method="get">
            <select name="province" multiple="multiple"><!--双标签元素，用multiple变为多选-->
                <option value="shandong" selected="selected">山东省</option><!--selected为默认选项-->
                <option value="henan">河南省</option>
                <option value="jiangsu">江苏省</option>
                <option value="shanxi">陕西省</option>
            </select>
        </form>

     

  • 选择文件类：

            <input type="file" name="update" value="1" /><!--多用于上传文件-->