当前位置:文档之家› HTML网页设计(表单元素)

HTML网页设计(表单元素)

HTML网页设计(表单元素)
1.什么是表单
表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在<form>标签在。

一个文档中可以包含多个表单,而且每个表单可以放置通常的主体内容(包括文字和图像在内)
Form标签
设计者可以将表单放在文档主体中的任何位置,但前提是将表单的缘故都放在<form>标签和</form>结束标签之间。

2.表单元素
在<form>标签中,可以包含以下5个标签。

Input标签
对于大量通常的表单内元素,可以使用<input>标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。

虽然<input>标签中有许多属性,但对每个元素来说,只有type和name属性是必须的。

当然,根据指定的比哦啊单元素类型,也可以设置一些其
可以使用<input>标签中的name属性来为字段命名(表单提交到处理过程中使用的字段,这种字段的说明可以参阅前面介绍)。

从技术角度上讲,name属性的值是任意的一个字符串,但是我们建议最好采用没有嵌入空格或标点的字符串。

<input>标签中必须的type属性可以用来选择控件的类型,其属性值如下表所示。

最有用也是最常见的表单输入元素时文字域,在浏览器窗口中显示为一行的空框,它接收用输入的一行信息,当你用户将表单提交给服务器时,这些信息就变成了元素值。

范例代码:
密码域
将type属性值设置为password,就可以创建一个密码域。

传统文本域的其他属性和语义也可以应用于密码域。

应用呢密码域时必须制定一个字段的名称,这样就可以为该段字段设置size和maxlength属性,并可以设置一个初见时的vlaue。

范例代码:
文件域(file)
复选框(checked)
单选框(ridio)
普通按钮(button)
设置普通按钮(button)代码:
重置按钮(Reset)
Textarea标签
作为表单的一部分,<textarea>标签可在用户浏览器中创建一个多行文字域,在此文本输入区内,用户几乎可以输入无线文字。

提交表单之后后,浏览器将所有行中的文字都收集起来,行间距用回车/换行符分隔,并将它们作为表单元素的值发送给服务器,这个值需要使用
在<.textarea>标签及其结束标签</textarea>之间可以包括纯文本,它的默认文本必须是纯文本(没有标签或其他特殊元素)。

Select标签
<select>提供了两种简洁的选择:下拉菜单和下拉列表。

将<option>标签表的条目放到表单的<select>标签中,这样接创建了一个选项下拉式菜单。

与其他表单标签一样,name属性在这里也是必需的,它将<select>选项提交给服务器时,
如果希望一次运行选择多个选项的话,可以在<select>标签中加入multip属性,这样可以让<secect>元素像(input type==checked)元素那样起作用。

如果没有指定multiple,那么一次只能选定一个选项,如同单选按钮组那样。

Size(大小)属性决定了用户一次性可以看见多少个选项。

Size的值应该是一个正整数,没有指定size值时,默认值是1、当size=1时,如果没有指定multiple,了浏览器通常会将<select>列表显示成一个弹出式菜单;当size的值超过1或者指定了multiple属性,<select>会显示为以个滚动列表。

Option标签
使用<option>标签可以定义一个<select>表单控件中的每个条目。

浏览器将<option>标签这个的内容作为<select>标签的菜单或下拉列表中的一个元素显示。

这样其内容只能是纯文本,使用value属性可以为每一个选项设置一个值,当用户选中该选项时,浏览器会将其发发送给服务器。

默认情况下,所有多选的,<select>标签中的选项都是未选中状态,因此当客户端想服务器提交表单时,这些选项不会包括在参数列表中。

<option>标签中包括selected属性后,就可以预选选定一个或多个选项,随后用户可以再取消选择,selected属性的HTML版本没有值,如果没有任何选项被预选选定,那么单选的<select>标签会预先选择第一个选项。

范例代码:
<body>
<select name="mjx" multiple="multiple" size="2">
<option selected="selected">请选择</option>
<optgroup label="选项组1">
<option value="购物">购物</option>
<option value="吃喝">吃喝</option>
<option value="保健">保健</option>
<option value="健身">健身</option>
</optgroup>
<optgroup label="选项组2">
<option value="教育">教育</option>
<option value="服务">服务</option>
<option value="娱乐">娱乐</option>
<option value="其他">其他</option>
</optgroup>
</select>
</body>
</html>
Optgroup标签
比哦啊单中的选项菜单有可能非常长,这使得它们很难显示和使用。

这种情况下,可以将一些相关的选项分组,然后将这些\组作为一组嵌套的层叠式菜单呈现给用户。

能保证菜单在不同的显示情况下都能显示出啦。

Label标签
使用label标签可以定义表单控制间的关系(如一个文本输入字段和一个或多个文本标记之
范例代码:
<body>
<label for="a">
<input name="mjx" type="radio" value="mjx" checked id="a" />10000-50000 </label>
<label for="b">
<input name="mjx1" type="radio" id="b" />50000-100000
</label>
<label for="c">
<input name="mjx2" type="radio" id="c" />100000以上
</label>
</body>
</html>。

相关主题