表单

一.表单

基本语法:  

<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="提交"/>