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" 普通按钮