当谈到页面上的表单时,相信大家都不陌生了,注册登录什么的都要与表单打交道,现在让我们来看一下表单中最常见的标签用法.
1.单行文本域(Text Field)
<label>First Name</label>
<input type="text“ name="firstname"/> <br/>
<label> Last Name </label>
<input type="text" name="lastname"/>
类型为text,name属性值一般与前面label标签意思相近,做到见名知义。
2.多行文本框(Text area)
<textarea name="description" readonly="readonly" rows=3 cols=40>
早上十点起床,泡制一壶新鲜的热咖啡,阅读报纸至中午,吃午餐,上画画/网球/kick
boxing课,看书,看《friends》,玩 Guitar Hero(电视游戏),再看书,睡觉
</textarea>
cols和rows属性分别指定文本宽的可见宽度与长度。readonly属性定义该文本宽只能读。
3.密码域(Password field)
<label>Password</label>
<input type="password" name="password"/>
输入的文字是不明的,只以点好显示。
4.单选按钮(Radio Button)
当用户从若干给定的的选择中选取其一时,就会用到单选框。
<input type="radio" id="male" name="gender" value="Male" checked="checked"/>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female" />
<label for="female">Female</label>
label的for属性值input中的id值,一旦触发了该label标签,浏览器就会自动将焦点转到和标签相关的表单控件上。
4.复选框(CheckBox)
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框.
<input type="checkbox" name="color[]" id="green" value="green" />
<label for="green">green</label>
<input type="checkbox" name="color[]" id="red" value="red"/>
<label for="red">red</label>
<input type="checkbox" name="color[]" id="blue" value="blue"/>
<labe for="blue">blue</label>
记住name一定要为数组,因为用户可能选择多个,必须用数组来保存多个value值。
5.下拉列表(Select)
select可以创建单选或多选菜单。
单选下拉列表:
<select name="sport">
<option value="football">football</option>
<option value="baskeball">basketball</option>
<option value="baseball">baseball</option>
</select>
option定义一个选项值,value指定发送到服务器上面的值.
多选下拉列表:
<select multiple="multiple" name="colors[]" size="5">
<option value="red"> red</option>
<option value="green"> green </option>
<option value="black">black</option>
<option value="blue">blue </option>
<option value="orange">orange</option>
</select>
单选列表添加multiple="multiple"属性就变成多选列表了,这时name一定要改为数组存储多个值,size属性定义可见选项的数目,一般很少用。需要说明的是,需用户按键盘来配合。
- 对于 windows:按住 Ctrl或shift 按钮来选择多个选项
- 对于 Mac:按住 command 按钮来选择多个选项
6.按钮(button)
<input type="button" value="clickbutton"/>
用法很简单, 一般你想置入少量不可更改的信息时会用到。
7.文件(file)
想让用户上传文件时,这个就用到了。
<input type="file" value="uploadfile"/>
用到这个form必须设置属性method="post" enctype="multipart/form-data" 才行;
8.提交和重置(submit reset)
<input type="submit" name="submit" value="提交" />
<input type="reset" value="重置" />
submit将数据提交到服务器,reset重置表单。
基本上常用的表单都写了,在写时注意一点:input单标签一定要关闭。