<form>表单元素介绍

zZoOoOJaVa 2017-03-27

一.表单定义

 HTML表单是一个包含表单元素的区域, 表单使用<form> 标签创建

二.表单元素

1.单行文本框<input type="text"/>.默认为text

<input type = “text” name=“名称”/>

 单行文本具有的主要属性:

size:文本框的宽度,默认20个字符宽度

 maxlength:输入的最大字符长度。

readonly:只读,不可改变value

disabled:禁用,当文本框被禁用时,不能获得焦点,当然,用户也不能改变文本框的值。并且在提交表单时,浏览器不会将该文本框的值发送给服务器。

2.密码框<input type="password"/> 

<input type=“password” name=“名称”/>

 3.单选按钮<input type="radio"/>

<input type=“radio” name=“gender” value=“male”/>

 4.隐藏域<input type="hidden"/>

<input type=“hidden” name=“隐藏域”/>

 隐藏域通常用于向服务器提交不需要显示给用户的信息。

5.文件上传<input type="file"/>

使用file,则form的enctype必须设置为multipart/form-data,method属性为POST。

<input name="form" id="form" type="file" size="60" accept="text/*"/>

 6.下拉框<select>标签

<select name="carlist">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mer">Mercedes</option>
  <option value="audi">Audi</option>
</select>
VolvoSaabMercedesAudi

7.多行文本<textarea></textarea>

<textarea name=“textareaContent” rows=“ 20“ cols=“50” >

cols=“50”、rows=“15”属性表示行数和列数,默认显示3。

8.<fieldset></fieldset>标签

<fieldset>
    <legend>爱好</legend>
     <input type="checkbox" value="篮球" />
     <input type="checkbox" value="爬山" />
     <input type="checkbox" value="阅读" />
 </fieldset>

 fieldset标签将控件划分一个区域,看起来更规整。

9.提交按钮<input type="submit"/>

<input type="submit"/>

10.重置按钮<input type="reset"/>

<input type=“reset” value=“重置按钮"/>

 当用户单击<input type="reset"/>按钮时,表单中的值被重置为初始值。

11.普通按钮<input type="button"/>

普通按钮通常用于单击执行一段脚本代码。

<input type="button" value="普通按钮"/>

 12.图像按钮<input type="image"/>

将图像作为按钮

<input type="image" src="bg.jpg" />

相关推荐