表单

2018-09-18 本文已影响0人圈圈_勿忘初心

什么是表单

表单,是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属性调整紧凑/松散

表单