<form>表单元素介绍

一.表单定义

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>

Volvo Saab Mercedes Audi

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" />

<form>表单元素介绍

猜你喜欢