HTML的form表单

1.表单简介

表单是html文档中的一个区域，表单中包含了一系列可交互的元素。

2.常用表单元素

文本输入元素：<input type=“text”>

单选框元素： <input type=“radio”>

复选框元素： <input type=“checkbox”>

文本区元素： <textarea>… </textarea>

下拉选择元素： <select>… </select>

按钮元素： <button type=“submit”>

3.input标签

（1）图片域   image

①语法：<input type="image" src="图片路径" />

②图片域既有按钮的特点，也拥有图像的特点，因此需要设置图片的路径。

（2）隐藏域  hidden

①有时候我们想要从前台页面向后端服务器传送一些数据，但是又不想让用户看见。这个时候可以通过一个隐藏域来传送数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。

②语法：<input type="hidden" />

 

（3）文件域   file

①在HTML中，文件上传使用input标签。但我们在使用文件域file时，必须在form的标签中说明编码方式 enctype="multipart/form-data"。只有这样服务器才能接收到正确的信息。

②语法：<input type="file" />

（4）单选按钮   radio

①在HTML中，单选按钮radio只能从选项列表中选择一项，选项与选项之间是互斥的。

②语法：<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值" />

③name和value是单选按钮必要的两个属性，必须要设置。value属性示为了方便向服务器端传递数据。

 

 ⑸表单按钮

①普通按钮   button

在HTML中，普通按钮一般情况下要配合JavaScript脚本来进行表单的实现。

语法：<input type="button" value="普通按钮的取值" οnclick="javascript脚本程序" /> 

value的取值就是显示在按钮上的文字，onclick是普通按钮的事件。

 

②提交按钮  submit

提交按钮可以看成是一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给服务器处理。

语法：<input type="submit" value="提交按钮的取值" />

 

③重置按钮    reset

重置按钮也可以看成是一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。

语法：<input type="reset" value="提交按钮的取值" />