html表单和输入.docx

html表单和输入.docx

《html表单和输入.docx》由会员分享，可在线阅读，更多相关《html表单和输入.docx（16页珍藏版）》请在冰豆网上搜索。

html表单和输入

html表单和输入

HTML表单和输入

HTML表单用于搜集不同类型的用户输入。

实例

文本域（Textfield）

本例演示如何在HTML页面创建文本域。

用户可以在文本域中写入文本。

密码域

本例演示如何创建HTML的密码域。

（可以在本页底端找到更多实例。

）表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如:

文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（）定义。

...

input元素

...

输入

多数情况下被用到的表单标签是输入标签（）。

输入类型是由类型属性（type）定义的。

大多数经常被用到的输入类型如下:

文本域（TextFields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

浏览器显示如下:

Firstname:

Lastname:

注意，表单本身并不可见。

同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（RadioButtons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

浏览器显示如下:

Male

Female

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

浏览器显示如下:

Ihaveabike

Ihaveacar

表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。

表单的动作属性定义了目的文件的文件名。

由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

Username:

浏览器显示如下:

SubmitUsername:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到"html_form_action.asp"的页面。

该页面将显示出输入的结果。

HTML表单（Forms）

HTML表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

举个简单的例子，一个让用户输入姓名的HTML表单（Form）。

示例代码如下:

action=";

method="get">

请输入你的姓名:

演示示例

学习HTML表单（Form）最关键要掌握的有三个要点:

表单控件（FormControls）

Action

Method

先说表单控件（FormControls），通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。

比如上面的例句里，inputtype="text"就是一个表单控件，表示一个单行输入框。

用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。

比如上面例句里的

。

至于method，表示了发送表单信息的方式。

method有两个值:

get和post。

get的方式是将表单控件的name/value信息经过编码之后，通过URL发送（你可以在地址栏里看到）。

而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。

那什么时候用get，什么时候用post呢,一般是这样来判断的，如果只是为取得和显示数据，用get;一旦涉及数据的保存和更新，那么建议用post。

HTML表单（Form）常用控件（Controls）HTML表单（Form）常用控件有:

表单控件（FormContros）说明

inputtype="text"单行文本输入框

将表单（Form）里的信息提交给表单里action所指向的文inputtype="submit"件

inputtype="checkbox"复选框

inputtype="radio"单选框

select下拉框

textArea多行文本输入框

inputtype="password"密码输入框（输入的文字用*表示）

表单控件（FormControl）:

单行文本输入框（inputtype="text"）

单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。

例句如下:

演示示例

表单控件（FormControl）:

复选框（inputtype="checkbox"）

复选框允许用户在一组选项里，选择多个。

示例代码:

苹果

桔子

芒果

演示示例

用checked表示缺省已选的选项。

桔子

演示示例

表单控件（FormControl）:

单选框（inputtype="radio"）使用单选框，让用户在一组选项里只能选择一个。

示例代码:

苹果

桔子

芒果

演示示例

用checked表示缺省已选的选项。

桔子

演示示例

表单控件（FormControl）:

下拉框（select）下拉框（Select）既可以用做单选，也可以用做复选。

单选例句如下:

苹果

桔子

芒果

演示示例

如果要变成复选，加muiltiple即可。

用户用Ctrl来实现多选。

例句:

演示示例

用户还可以用size属性来改变下拉框（Select）的大小。

演示示例

表单控件（FormControl）:

多行输入框（textarea）多行输入框（textarea）主要用于输入较长的文本信息。

例句如下:

其中cols表示textarea的宽度，rows表示textarea的高度。

演示示例

表单控件（FormControl）:

密码输入框（inputtype="password"）

密码输入框（inputtype="password"）主要用于一些保密信息的输入，比如密码。

因为用户输入的时候，显示的不是输入的内容，而是黑点符号。

。

例句如下:

演示示例

表单控件（FormControl）:

提交（inputtype="submit"）通过提交（inputtype=submit）可以将表单（Form）里的信息提交给表单里action所指向的文件。

例句如下:

演示示例

表单控件（FormControl）:

图片提交（inputtype="image"）inputtype=image相当于inputtype=submit，不同的是，inputtype=image以一个图片作为表单的提交按钮，其中src属性表示图片的路径。

alt="提交"NAME="imgsubmit">

演示示例

HTML标签

定义和用法

select元素可创建单选或多选菜单。

当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将

表单数据提交给服务器时包括name属性。

实例

创建带有4个选项的选择列表:

Volvo

Saab

Opel

Audi

HTML标签</p><p>定义和用法</p><p><textarea>标签定义多行的文本输入控件。</p><p>文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是Courier）。</p><p>可以通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height和width属性。</p><p>注释:</p><p>在文本输入区内的文本行间，用"%OD%OA"（回车/换行）进行分隔。</p><p>提示:</p><p>可以通过<textarea>标签的wrap属性设置文本输入区内的换行模式。</p><p>有关wrap属性的详细信息。</p><p>实例</p><p><textarearows="3"cols="20"></p><p>在w3school，你可以找到你所需要的所有的网站建设教程。</p><p>

TIY

HTML标签

定义和用法

标签为input元素定义标注（标记）。

label元素不会向用户呈现任何特殊效果。

不过，它为鼠标用户改进了可用性。

如果您在label元素内点击文本，就会触发此控件。

就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的for属性应当与相关元素的id属性相同。

实例

带有两个输入字段和相关标记的简单HTML表单:

TIY

浏览器支持

所有主流浏览器都支持标签。

Safari2或更早的版本不支持标签。

HTML与XHTML之间的差异

NONE

提示和注释:

注释:

"for"属性可把label绑定到另外一个元素。

请把"for"属性的值设置为相关元素的id属性的值。

可选的属性

DTD指示此属性允许在哪种DTD中使用。

S=Strict,T=Transitional,F=Frameset.

属性值描述DTD

规定label与哪个表单元素绑定。

forelement_idSTF标准属性

id,class,title,style,dir,lang,xml:

lang如需完整的描述，请访问标准属性。

事件属性

accesskey,onfocus,onblur,onclick,ondblclick,onmousedown,onmouseup,

onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup

如需完整的描述，请访问事件属性。

TIY实例

HTML