代码改变世界

html表单元素概览

2012-02-14 13:57  youxin  阅读(398)  评论(0)  编辑  收藏  举报

  当谈到页面上的表单时，相信大家都不陌生了，注册登录什么的都要与表单打交道，现在让我们来看一下表单中最常见的标签用法.

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单标签一定要关闭。