表单

一.表单
 　　　　基本语法:
  　　　　　　　　<form method="表单提交方式(post/get)" action="表单提交地址">
   
　　　　　　　　  </form>
  
二.input元素
 　　　　　　type：代表input元素类型
 　　　　　　name: 表单元素名称
　　　　　　 value: 表单元素初始值
 　　　　　　size: 表单宽度
　　　　　　 maxLength: 输入的最大字符数
　　　　　　 checked: 主要用于单选或多选按钮，代表默认选中
 
三.常用表单元素
 
 　　　　　　　　　　1.普通文本框：

　　　　　　　　　　　　　　　　 <input type="text" name="username" value="杨凯" size="30px" maxlength="10"/>
 
 　　　　　　　　　　2.密码框：

　　　　　　　　　　　　　　  <input type="password" name="password" size="30" maxlength="16"/>
 
 　　　　　　　　　　3.单选按钮：（name属性必须有，值相同）  
  　　　　　　　　　　　　　　　　<input type="radio" name="gender" value="男" checked/>男
  　　　　　　　　　　　　　　　　<input type="radio" name="gender" value="女"/>女
  
　　　　　　　　　　 4.多选按钮（name属性必须有，值相同，可以选择多个）
  　　　　　　　　　　　　　　　  <input type="checkbox" name="hobby" value="睡觉" checked/>睡觉
       　　　　　　　　　　 　　　　<input type="checkbox" name="hobby" value="吃饭"/>吃饭
      　　　　　　　　　　 　　　　 <input type="checkbox" name="hobby" value="打豆豆"/>打豆豆
  
　　　　　　　　　　 5.下拉框：（name属性必须有，size代表初始显示项数）
  　　　　　　　　　　　　　　 <select name="address">
                   　　　　　　　　　　　　 <option value="北京" name="bj">北京</option>
                    　　　　　　　　　　　　<option value="上海" name="sh">上海</option>
                    　　　　　　　　　　　　<option value="南京" name="nj">南京</option>
                    　　　　　　　　　　　　<option value="山东" name="sd" selected>山东</option>
                    　　　　　　　　　　　　<option value="西安" name="xa">西安</option>
             　　　　　　　　　　　　</select>
   
 　　　　　　　　　　6.按钮：
  　　　　　　　　　　　  button普通按钮：

　　　　　　　　　　　　　　　　　　　　<input type="button" name="button" value="普通按钮"/>
      　　　　　　　　　　  reset按钮：（重置表单数据）

　　　　　　　　　　　　　　　　　　　　<input type="reset" name="reset" value="重置按钮"/>
      　　　　　　　　　　  submit提交按钮：

　　　　　　　　　　　　　　　　　　　　<input type="submit" name="submit" value="提交按钮"/>
      　　　　　　　　　　  image图像按钮：（同样会提交表单数据）

　　　　　　　　　　　　　　　　　　　　<input type="image" src="../image/login.gif" name="image"/>
  
 　　　　　　　　　　 7.多行文本域：

　　　　　　　　　　　　　　　　<textarea name="textarea" rows="20" cols="50"></textarea>
 
  　　　　　　　　　    8.文件域：
  　　　　　　　　　　　　　　<form action="" method="post" enctype="multipart/form-data">
   　　　　　　　　　　　　　　<input type="file" name="files" />
 
  　　　　　　　　　　　　　　</form>

    　　　　　　　　　  9.email自动验证: 

　　　　　　　　　　　　　　　　　　 <input type="email" name="email"/>
 
    　　　　　　　　　 10.网址自动验证：

　　　　　　　　　　　　　　　　　　<input type="url" name="url"/>
      
    　　　　　　　　　 11.数字：

　　　　　　　　　　　　　　<input type="number" min="0" max="100" step="5" name="number"/>
      
   　　　　　　　　　  12.滑块：

　　　　　　　　　　　　　　<input type="range" name="range" max="20" min="-20" step="10"/>
       
   　　　　　　　　　  13.搜索框：

　　　　　　　　　　　　　　　　<input type="search" name="search"/>
 
四.表单的高级应用
 
　　　　　　　　　　 1.隐藏域：（在表单当中不会显示，但是确实存在数据，当提交时会将隐藏用于数据一起提交）
 　　　　　　　　　　　　　　 <input type="hidden" value="666" name="userid">

 　　　　　　　　　　2.只读和禁用：
　　　　　　　　·　　　　　　  <input name="name" type="text" value="张三"  readonly>
 　　　　　　　　　　　　　　 <input type="submit "  disabled   value="保存" >
 　　　　　　　　　　3.标注：（光标定位）
 　　　　　　　　　　　　　　 <label for="id">标注的文本</label>
  　　　　　　　　　　　　　　<input type="radio" name="gender" id="male"/>
  
五.表单的初级验证
 　　　　　　　　　　1.placeholder： 友好提示
　　　　　　　　　　 2.required：  非空
 　　　　　　　　　　3.pattern ： 正则表达式验证
 
　　　　　　　　　　 用户名:

　　　　　　　　　　　　　　<input type="text" name="username" placeholder="请输入用户名" required/>
    　　　　　　　　　手机号:

　　　　　　　　　　　　　　<input type="text" name="phone" required pattern="^1[358]\d{9}"/>
    　　　　　　　　　　　　　<input type="submit" value="提交"/>