HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有:
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)
表单控件(Form Control):单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。例句如下:
<input type="text" name="yourname">
表单控件(Form Control):复选框(input type="checkbox")
复选框允许用户在一组选项里,选择多个。示例代码:
<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>
表单控件(Form Control):单选框(input type="radio")
使用单选框,让用户在一组选项里只能选择一个。示例代码:
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
表单控件(Form Control):下拉框(select)
下拉框(Select)既可以用做单选,也可以用做复选。单选例句如下:
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
如果要变成复选,加muiltiple即可。用户用Ctrl来实现多选。例句:
<select name="fruit" multiple>
用户还可以用size属性来改变下拉框(Select)的大小。
表单控件(Form Control):多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下:
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度,rows表示textarea的高度。
表单控件(Form Control):密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入,比如密码。因为用户输入的时候,显示的不是输入的内容,而是黑点符号。。例句如下:
<input type="password" name="yourpw">
表单控件(Form Control):提交(input type="submit")
html内容文本框通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下:
<input type="submit" value="提交">
表单控件(Form Control):图片提交(input type="image")
input type=image 相当于 input type=submit,不同的是,input type=image 以一个图片作为表单的提交按钮,其中 src 属性表示图片的路径。
<input type="image" src ="www.blabla/images/icons/go.gif"
alt = "提交" NAME="imgsubmit">
提示和注释:
提示:请使用 label 元素为某个表单控件定义标签。
带有两个输入字段和相关标记的简单 HTML 表单:
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
可选的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性
描述
DTD
for
element_id
规定 label 与哪个表单元素绑定。
STF
标准属性
id, class, title, style, dir, lang, xml:lang
如需完整的描述,请访问标准属性
事件属性
accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
如需完整的描述,请访问事件属性
<input> 标签。
可选的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性
描述
DTD
accept
mime_type
规定通过文件上传来提交的文件的类型。
STF
align
left
right
top
middle
bottom
不赞成使用。规定图像输入的对齐方式。
TF
alt
text
定义图像输入的替代文本。
STF
checked
checked
规定此 input 元素首次加载时应当被选中。
STF
disabled
disabled
当 input 元素加载时禁用此元素。
STF
maxlength
number
规定输入字段中的字符的最大长度。
STF
name
field_name
定义 input 元素的名称。
STF
readonly
readonly
规定输入字段为只读。
STF
size
number_of_char
定义输入字段的宽度。
STF
src
URL
定义以提交按钮形式显示的图像的 URL。
STF
type
button
checkbox
file
hidden
image
password
radio
reset
submit
text
规定 input 元素的类型。
STF
value
value
规定 input 元素的值。
STF
标准属性
id, class, title, style, dir, lang, xml:lang
如需完整的描述,请访问标准属性
事件属性
tabindex, accesskey, onfocus, onblur, onselect, onchange,
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
如需完整的描述,请访问事件属性

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。