什么是表单
表单,是html中一种搜集用户数据的方式, 用户可以在表单中填写信息,提交给服务器
语法:
<form action="提交地址" method="get|post">
</form>
get: 不安全, 能提交的数据量少
post: 安全, 能提交的数据量多
表单元素
1. 用来填的:
单行文本框:
<input type="text|password" name="元素名" value="值" size="宽度" maxlength="允许输入的最大字符数" placeholder="提示性文本" />
text: 单行文本框
password: 密码框
多行文本框:
<textarea name="" cols="列数" rows="行数" maxlength="" placeholder="">值</textarea>
2. 用来选的:
<input type="radio|checkbox" name="" value="" checked />
radio: 单选框
checkbox: 复选框
checked: 默认选中
技巧: 为一组radio设置相同的name可以实现互斥.
下拉列表框:
<select name="" size="">
<option value="选项的值" selected>选项的文本</option>
</select>
size: 同时显示几个选项
option: 选项
selected: 该选项默认选中
3. 用来点的:
<input type="submit|reset|button" value="按钮上的文本" />
submit: 提交
reset: 重置
button: 普通按钮, 没有特殊功能, 其功能可自定义
<input type="image" src="图片地址" />
这是图片按钮, 它的功能和submit一样!
技巧: 可以使用button标签来替代上述按钮, 如:
<button type="submit|reset|button">按钮上的文本</button>
<button><img src="图像地址" /></button>
4. 其它
隐藏域:
<input type="hidden" name="" value="" />
文件域:
<input type="file" name="" />
只读和禁用
readonly
disabled
使用Label提高用户体验
目的: 用户点击文本也可以让对应的表单元素得到焦点.
- 如果是用来填的表单元素:
<label for="对应的元素的id">文本</label>
- 如果是radio或checkbox:
<label>
<input type="radio|checkbox" .. />
文本
</label>
使用table布局表单元素
- table放在form中
- 通常分2列,左侧列放label, 右侧列放表单元素
- 可通过设置table的cellspacing或cellpadding属性调整紧凑/松散
