HTML初级入门(二)

表单相关的元素和属性

1.form元素

form元素用于生成输入表单,其作用是将其内元素的数据进行提交,除了可以指定核心属性外还具有以下属性。
其中有以下两属性为必填属性——

<form action="#" method="get">

• action属性指定当表单内的提交按钮触发后该表单被提交到哪个地址,既可指定绝对地址也可指定相对地址,#指定本页面.

• method属性指定提交表单时发送何种类型的请求,该属性值可为get或post,分别用于发送GET或POST请求,通常建议使用POST请求(get请求会将参数显示在地址栏中)。

• 非必填属性中,enctype指定表单内容所使用的字符集,name指定表单名称(常建议与id属性值一致),
  target指定用何种方式打开目标URL(与a属性target一致).

2.input元素

input元素是表单控件中功能最丰富的,通过控制其type属性值可作处多种多样的框效果.

单行文本框：<input id="username" name="username" type="text" placeholder="请输入账号"/><br />
不能编辑的文本框：<input id="username2" name="username" type="text" readonly="readonly" /><br />
密码框：<input id="password" name="password" type="password" placeholder="请输入密码"/><br /></label>
隐藏域：<input id="hidden" name="hidden" type="hidden" /><br />

一组单选框：<br />
红：<input id="color" name="color" type="radio" value="red" />
绿：<input id="color2" name="color" type="radio" value="green" />
蓝：<input id="color3" name="color" type="radio" value="blue" />

两个复选框：<br />
<input id="website" name="website" type="checkbox" value="leegang.org" /> 
<input id="website2" name="website" type="checkbox" value="leegang.org" /> <br />

文件上传域：<input id="file" name="file" type="file"  /> 
图像域：<input src="课表.png" type="image" alt="课表" style="width:200px;length:300px"/><br />

下面是四个按钮：<br />
<input id="ok" name="ok" type="submit" value="提交" />  
<input id="dis" name="dis" type="submit" value="提交"  disabled /> 
<input id="cancle" name="cancle" type="submit" value="重填" /> 
<input id="no" name="no" type="submit" value="无动作" /> 

其中我们看到type的属性值有诸如text、password、hidden、radio、checkbox、image、file、submit、reset及button。他们能够实现上述的多种功能。并且,在H5中为input新增了很多非常实用的type属性值,例如color(颜色选择框),date(日期框)等等十分便利的功能,有兴趣可以在网上找一下全部的input元素type属性的值。

而在使用中需要注意的是,一组单选框的name属性值需要保持一致,这样浏览器才能够识别出哪些单选框是一组的,如果各自的name值都不一致,那么每个单选框都可以选中,也就达不到单选的效果了。
复选框同样需要保持name值一致,涉及到数据的收集,需确定什么为同一组。

当我们用input元素构造一个按钮时,按钮显示的字有value属性值所控制。

上述代码中还有一个特殊的属性,placeholder属性,其所达到的效果就是我们日常所见到的密码框等地方默认会显示淡灰色的请输入密码等字样,当我们选中输入框或输入数据之后提示字样便会消失,placeholder的值便是我们所见到的那些提示信息。

3.使用label定义标签

label元素用于在表单元素中定义标签,这些标签可以对其他可生成请求参数的表单控件元素(如文本框\密码框等)进行说明,其最显著的功能是当用户点击label元素所生成的标签时,用户的光标就会自动跳到标签所对应的表单控件中。

<label >
单行文本框：<input id="username" name="username" type="text" placeholder="请输入账号"/><br />
</label>

在上述代码中,当用户点击"单行文本框"时,其所对应的input输入框就会变成输入状态。

此元素有两种使用方式

<label for="username">单行文本框：</label>
<input id="username" name="username" type="text" placeholder="请输入账号"/><br />

• 隐式使用for属性,指定label元素的for属性值为所关联的表单控件的id值。

<label>密码框：<input id="password" name="password" type="password" /><br /></label>

• 显式关联,将普通文本,表单控件一起放在label元素中。

4.使用button定义按钮

button可定义一个按钮，input标签同样也能够定义一个按钮,而两者不同的是，input所定义的按钮只能通过value值来控制按钮的显示内容，而button元素内部可以包含文本、文本格式化标签、图像等内容，这就是两者的不同之处。
除了通用属性外,其还具有disabled、type属性。

• disabled指定是否禁用此按钮,该属性值仅为disabled或不写
• type值通常为button（按钮）、reset（重置）、submit（提交）其中之一

5.select与option元素

select元素用于创建列表框或下拉菜单,该元素必须和option元素结合使用,每个option元素代表一个列表项或菜单项。
与其他表单控件不同的是select元素本身并不能指定value值,其所显示的信息都有option元素所包含。

select除了通用属性外还具有以下属性

• disabled,同上述
• multiple,设置该列表框和下拉菜单是否支持多选,该属性值为支持boolean值的属性,在设置为支持多选时,当用户按住ctrl键时即可完成多选。

在select元素中只能包含option元素和optgroup元素

• option用于定义列表的行,该元素只能包含文本内容作为该项的文本
• optgroup用于定义列表项或菜单项的组,即option的分组,其中只包含option元素

option则具有以下属性

• disabled,同上
• selected,指定该表项初始是否为指定状态,值只能是selected
• value指定该选项对应的请求参数值(传给后台的值)

optgroup则具有以下属性

• label,用于指定该选项组的标签,这个属性必须填(有点类似于value)
• disabled,同上

示例如下

<select id="test" name="tset" multiple size="6">
	<optgroup labe1="测试样例1">
		<option value="java">1</option>
		<option value="android">2</option>
		<option value="ee">3</option>
	<optgroup labe1="测试样例1">
		<option value="test">1</option>
		<option value="test1">2</option>
		<option value="test2">3</option>
	</optgroup>
</select><br />

6.fieldset与legend元素

filedset元素可用于对表单内表单元素进行分组,通俗来说就是会讲fileldset所包含元素在显示时用一个框框在其中,而legend元素则为其设置标题.

fieldset除了通用属性外具有以下属性

• name,指定该fieldset的名称
• form,该属性值必须为一个有效地form元素的id,用于指定该fieldset元素属于该指定表单
• disabled,同上

示例如下

<fieldset name="sex" disabled>
<legend>性别</legend>
男性：<input id="gender" name="gender" type="radio" value="male" /> 
女性：<input id="gender2" name="gender" type="radio" value="female" />
</fieldset> <br />

HTML5新增的表单属性

H5中为原有的表单及表单控件元素新增了大量属性,这极大地增强了HTML表单的功能,在这举几个比较典型的例子,其他全部元素请自行上网查询

1. autofocus属性
   当为某个表单控件增加该属性后,浏览器打开该页面时该组件就会自动获得焦点(光标所在位置),由于打开页面时只能有一个控件获得焦点,因此整个页面上最多只能有一个表单控件可设置该属性.

        <input id="username" name="username" type="text" autofocus/>

• placeholder属性
  在上面input元素的介绍中提到过,其所达到的效果就是我们日常所见到的密码框等地方默认会显示淡灰色的请输入密码等字样,当我们选中输入框或输入数据之后提示字样便会消失,placeholder的值便是我们所见到的那些提示信息。

• list属性
  该属性非常实用,其既允许用户输入,也允许你用户通过下拉菜单自行选择.
  list属性值应该是一个datalist元素组件的id,也就是说list必须与datalist元素结合使用.
  datalist相当于一个看不见的select元素,用于升成一个隐藏的下拉菜单,其所能包含元素与select完全相同,该元素用于与指定了list属性的input元素结合使用.当双击指定了list属性的文本框时,该文本框会显示datalist生成的下拉菜单.

示例如下

<form method="post" action="buy">
	请输入图书：<input type="text" name="name" list="books"/><p>
</form>
<datalist id="books">
	<option value="java">测试样例1</option>
	<option value="Android">测试样例2</option>
	<option value="ee">测试样例3</option>
</datalist>