表单form的type种类

Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。
先讲讲关于form表单的type的属性值有哪些：Input组件用于接受来自用户的数据，其可用属性如下

1.type="text" 单行文本框

例如：
<form>
    <tr>
         <td>用户名：</td>
         <td><input type="text" value="默认值" name="username"></td>
     </tr>
</form>

2.type="password" 密码框，输入的内容将会被遮挡

例如：
<form>
    <tr>
         <td>密码：</td>
         <td><input type="password" name="password"></td>
     </tr>
</form>

3.type="checkbox" 复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中

例如：
<form>
    <tr>
         <td>爱好</td>
         <td>
             <label>
                 <input type="checkbox" name="hobbies" value="swimming">游泳
             </label>
             <label>
                 <input type="checkbox" name="hobbies" value="running">跑步
             </label>
             <label>
                 <input type="checkbox" name="hobbies" value="basketball">篮球
             </label>
             <label>
                 <input type="checkbox" name="hobbies" value="reading">阅读
             </label>
         </td>
    </tr>
</form>

4.type="radio" 单选按钮，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个组件

例如：
<form>
    <tr>
         <td>性别</td>
         <td>
             <label for="gender_male">
                 <input id="gender_male" type="radio" name="gender" value="male" checked="true">男
             </label>
             <label for="gender_female">
                 <input id="gender_female" type="radio" name="gender" value="female">女
             </label>    
         </td>
     </tr>
</form>

5.type="submit" 提交按钮

例如：
<form>
    <tr>
         <td colspan="2" align="center">
             <input type="submit" name="" value="注册">
         </td>
     </tr>
</form>

6.type="file"

例如：
<form>
    <tr>
         <td>照片</td>
         <td>
             <input type="file" name="pic">
         </td>
     </tr>
</form>

7.type="image" 图像按钮，必须使用src来加载图片，使用alt来声明替换文本

8.type="reset" 重置按钮

9.type="hidden" 隐藏域，该组件不显示在页面中，但是其值会被提交

10.type="button" 普通按钮

猜你喜欢