前端HTML表单

比眉伴天荒 2022-09-03 14:25 223阅读 0赞

## 表单简介： ##

*  标签名：form
 *  用于将数据发送到服务器
 *  <form action="服务器地址"></form>

## 表单项： ##

>  *  文本框：
>     
>         <input type="text" name="name">
>     
>     ,name作为服务器变量名
>  *  密码框：
>     
>         <input type="password" name="password">
>     
>     ，name作为服务器变量名
>  *  提交按钮:
>     
>         <input type="submit" value="提交">
>     
>     ，value显示在页面上的文字
>  *  单选框：
>     
>         <input type="radio" name="check" value="first" checked>
>         <input type="radio" name="check" value="second" >
>     
>     ，设置相同name可以合并为一个单选框，value作为发送到服务器的值，checked表示默认选中
>  *  多选框：
>     
>         <input type="checkbox" name="checkb" value="1" checked>
>         <input type="checkbox" name="checkb" value="2" checked>
>     
>     ，同单选框类似，都必须设置相同的name，value作为值发送到服务器
>  *  下拉列表：
>     
>         <select name="select" >
>                     <option value="1">选项一</option>
>                     <option selected  value="2">选项二</option>
>                     <option value="3">选项三</option>
>                 </select>
>     
>     name发送到服务器的变量名，value发送到服务器的值，selected默认选中。
>  *  按钮总结：
>     
>     <table style="width:500px;"> 
>      <tbody> 
>       <tr> 
>        <td> <p>&nbsp;&lt;input&nbsp;type="submit"&nbsp;value="提交"&gt;</p> </td> 
>        <td> <p>&lt;button&nbsp;type="submit"&gt;提交&lt;/button&gt;</p> </td> 
>       </tr> 
>       <tr> 
>        <td> <p>&nbsp;&nbsp;&lt;input&nbsp;type="reset"&nbsp;value="重置"&gt;</p> </td> 
>        <td> <p>&nbsp;&lt;button&nbsp;type="reset"&gt;重置&lt;/button&gt;</p> </td> 
>       </tr> 
>       <tr> 
>        <td> <p>&lt;input&nbsp;type="button"&nbsp;value="按钮"&gt;</p> </td> 
>        <td> <p>&lt;button&nbsp;type="button"&gt;按钮&lt;/button&gt;</p> </td> 
>       </tr> 
>      </tbody> 
>     </table>
>     
>     ![20210808151259789.png][]
>  *  颜色框： <input type="color">，ie不支持
>  *  邮件框：<input type="email">

### 相关属性： ###

>  *  autocomplete="off"，关闭自动补全
>  *  readonly，只读，数据会提交
>  *  disabled，禁用，数据不会提交
>  *  autofocus，自动获取焦点，刷新页面自动选中

[20210808151259789.png]: /images/20220829/c972090f75c64d5dad6fe4e9bf52e13f.png