HTML表单标记教程(3):输入标记
HTML表单标记教程(3):输入标记
发布时间:2016-12-27 来源:查字典编辑
摘要:HTML表单标记教程,这节主要讲解如何在网页中使用INPUT标记,主要介绍INPUT标记的属性的使用.输入标记是表单中最常用的标记之一。常用...

HTML表单标记教程,这节主要讲解如何在网页中使用INPUT标记,主要介绍INPUT标记的属性的使用.

输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。 基本语法 01 <Form> 02 <input name="field_name" type="type_name"> 03 </Form> 语法解释

<input>标记的属性如下表所示 属性 描述 name 域的名称 type 域的类型

在type属性中,包含以下属性值 type属性值 描述 text 文字域 password 密码域 file 文件域 checkbox 复选框 radio 单选框 button 普通按钮 submit 提交按钮 reset 重置按钮 hidden 隐藏域 image 图像域(图像按钮)

#p# 文字域TEXT

text属性值用来设定在表单的文本域中,输入任何类型的文本、数字或字母。输入的内容以单行显示。 基本语法 <input type="text" name="field_name" maxlength=value size=value value="field_value"> 语法解释

这些属性的含义如下表所示 文字域属值 描述 name 文字域的名称 maxlength 文字域的最大输入字符数 size 文字域的宽度 value 文字域的默认值 文件范例:11-6.htm

在页面中插入文字域。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入文字域</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20>

13 <br>

14 网址:<input type="text" name="URL" size=20 maxlength=50 value="http://">

15 <br>

16 </Form>

17 </body>

18 </html> 文件说明

第11行是表单标记,表单的名称为invest,将表单内容以电子邮件的方式传送,并使用get传输方式。第12行设定"性名"的文本框为20字符宽度,第14行设定"网址"的文本框为20字符宽度,但最大可以输入50个字符,并且显示"http://"的初始值。

#p# 密码域PASSWORD

在表单中还有一种文本域的形式为密码域,输入到文本域中的文字均以星号"∗"或圆点显示。 基本语法 <input type="password" name="field_name" maxlength=value size=value> 语法解释

这些属性的含义如下表所示 文字域属性 描述 name 密码域的名称 maxlength 密码域的最大输入字符数 size 密码域的宽度(以字符为单位) value 密码域的默认值 文件范例:11-7.htm

在页面中插入密码域。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入密码域</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20>

13 <br>

14 网址:<input type="text" name="url" size=20 maxlength=50 value="http://">

15 <br>

16 密码:<input type="password" name="password" size=20 maxlength=8>

17 <br>

18 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8>

19 </Form>

20 </body>

21 </html> 文件说明

第16行和第18行是密码域。设定了密码域的尺寸、名称和最大输入字符数。

#p# 文件域FILE

文件域可以让用户在域的内部填写自己硬盘中的文件路径,然后通过表单上传,这是文件域的基本功能。如在线发送E-mail时常见的附件功能。有的时候要求用户将文件提交给网站,例如Office文档、浏览者的个人照片或者其它类型的文件,这时就要用到文件域。

文件域的外观是一个文本框加一个浏览按钮,用户既可以直接将要上传给网站的文件的路径写在文本框内,也可以单击浏览按钮,在自己的电脑中找到要上传的文件。 基本语法 <input type="File" name="field_name"> 文件范例:11-8.htm

在页面中插入文件域。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入文件域</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

16 请上传你的照片:<input type="file" name="File">

17 </Form>

18 </body>

19 </html> 文件说明

第16行就是插入的文件域。 复选框CHECKBOX

浏览者填写表单时,有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查,首先提出调查的问题,然后让浏览者在若干个选项中进行选择。又例如收集个人信息时,要求在个人爱好的选项中进行选择等。适应以上各种不同类型调查的需要,选择域分为两种。 多选框:可以在若干选项中选择多个项目 单选框:在若干选项只允许选择一项

复选框能够进行项目的多项选择,以一个方框表示。 基本语法 <input type="checkbox" name="field_name" checked value="value"> 语法解释

checked表示此项被默认选中,value表示选中项目后传送到服务器端的值。 文件范例:11-9.htm

在页面中插入复选框。

01 <---------------------------- -->

02 <>

04 <>

05 <---------------------------- -->

06 <html>

07 <head>

08 <title>插入复选框</title>

09 </head>

10 <body>

11 <h1>用户调查</h1>

12 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

13 姓名:<input type="text" name="username" size=20><br>

14 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

15 密码:<input type="password" name="password" size=20 maxlength=8><br>

16 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

17 请上传你的照片:<input type="File" name="File"><br>

18 请选择你喜欢的音乐:

19 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

20 <input type="checkbox" name="m2" value="jazz">爵士乐

21 <input type="checkbox" name="m3" value="pop">流行乐

22 </Form>

23 </body>

24 </html> 文件说明

第18行到20行就是插入的复选框。其中每一个复选框有其独立的名称和值,"摇滚乐"项目是被默认选中的。

#p# 单选框RADIO

单选框能够进行项目的单项选择,以一个圆框选择。 基本语法 <input type="radio" name="field_name" checked value="'value" > 语法解释

checked表示此项被默认选中,value表示选中项目后传送到服务器端的值。 文件范例:11-10.htm

在页面中插入单选框。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入单选框</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

16 请上传你的照片:<input type="File" name="File"><br>

17 请选择你喜欢的音乐:

18 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

19 <input type="checkbox" name="m2" value="jazz">爵士乐

20 <input type="checkbox" name="m2" value="pop">流行乐<br>

21 请选择你居住的城市:

22 <input type="radio" name="city" value="beijing" checked>北京

23 <input type="radio" name="city" value="shanghai">上海

24 <input type="radio" name="city" value="nanjing">南京

25 </Form>

26 </body>

27 </html> 文件说明

第22行到第24行就是插入的单选框。其中每一个单选框的名称是相同的,有其独立的值,"北京"项目是被默认选中的。

#p# 普通按纽BUTTON

表单中的按钮起着至关重要的作用。按钮可以激发提交表单的动作,可以在用户需要修改表单的时候,将表单恢复到初始的状态,还可以依照程序的需要,发挥其它作用。普通按钮主要是配合JavaScript脚本来进行表单的处理。 基本语法 <input type="button" name="field_name" value="button_text"> 语法解释

value值代表显示在按钮上面的文字。 文件范例:11-11.htm

在页面中插入普通按钮。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入普通按钮</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

16 请上传你的照片:<input type="File" name="File"><br>

17 请选择你喜欢的音乐:

18 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

19 <input type="checkbox" name="m2" value="jazz">爵士乐

20 <input type="checkbox" name="m2" value="pop">流行乐<br>

21 请选择你居住的城市:

22 <input type="radio" name="city" value="beijing" checked>北京

23 <input type="radio" name="city" value="shanghai">上海

24 <input type="radio" name="city" value="nanjing">南京<br>

25 <input type="button" name="button" value="普通按钮">

26 </Form>

27 </body>

28 </html> 文件说明

第25行就是插入的普通按钮。

#p# 提交按纽SUBMIT

单击提交按钮后,可以实现表单内容的提交。 基本语法 <input type="sbmit" name="field_name" value="button_text"> 文件范例:11-12.htm

在页面中插入提交按钮。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入提交按钮</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=post name=invest enctype=text/plain>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8>br>

16 请上传你的照片:<input type="File" name="File"><br>

17 请选择你喜欢的音乐:

18 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

19 <input type="checkbox" name="m2" value="jazz">爵士乐

20 <input type="checkbox" name="m2" value="pop">流行乐<br>

21 请选择你居住的城市:

22 <input type="radio" name="city" value="beijing" checked>北京

23 <input type="radio" name="city" value="shanghai">上海

24 <input type="radio" name="city" value="nanjing">南京<br>

25 <input type="submit" name="submit" value="提交表单">

26 </Form>

27 </body>

28 </html> 文件说明

第25行就是插入的提交按钮。

#p# 重置按纽RESET

单击重置按钮后,可以清除表单的内容,恢复默认的表单内容设定。 基本语法 <input type="reset" name="field_name" value="button_text"> 文件范例:11-13.htm

在页面中插入重置按钮。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入重置按钮</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlengthH=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

16 请上传你的照片:<input type="file" name="File"><br>

17 请选择你喜欢的音乐:

18 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

19 <input type="checkbox" name="m2" value="jazz">爵士乐

20 <input type="checkbox" name="m2" value="pop">流行乐<br>

21 请选择你居住的城市:

22 <input type="radio" name="city" value="beijing" checked>北京

23 <input type="radio" name="city" value="shanghai">上海

24 <input type="radio" name="city" value="nanjing">南京<br>

25 <input type="submit" name="submit" value="提交表单">

26 <input type="reset" name="reset" value="重置表单">

27 </Form>

28 </body>

29 </html> 文件说明

第26行就是插入的重置按钮。

#p# 图像域IMAGE

图像域是指可以用在提交按钮上的图片,这幅图片具有按钮的功能。使用默认的按钮形式往往会让人觉得单调。如果网页使用了较为丰富的色彩或稍微复杂的设计,再使用表单默认的按钮形式甚至会破坏整体的美感。这时可以使用图像域,创建和网页整体效果相统一的图像提交按钮。 基本语法 <input type="image" name="field_name" src="image_url"> 文件范例:11-14.htm

在页面中插入图像提交按钮。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入图像提交按钮</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

16 请上传你的照片:<input type="File" name="File"><br>

17 请选择你喜欢的音乐:

18 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

19 <input type="checkbox" name="m2" value="jazz">爵士乐

20 <input type="checkbox" name="m2" value="pop">流行乐<br>

21 请选择你居住的城市:

22 <input type="radio" name="city" value="beijing" checked>北京

23 <input type="radio" name="city" value="shanghai">上海

24 <input type="radio" name="city" value="nanjing">南京<br>

25 <input type="image" name="image" src="11-14.GIF">

26 </Form>

27 </body>

28 </html> 文件说明

第25行就是插入的图像提交按钮。

#p# 隐藏域HIDDEN

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到浏览器。 基本语法 <input type="hidden" name="field_name" value="value"> 文件范例:11-15.htm

在页面中插入表单隐藏域。

01 <---------------------------- -->

02 <>

03 <>

04 <---------------------------- -->

05 <html>

06 <head>

07 <title>插入隐藏域</title>

08 </head>

09 <body>

10 <h1>用户调查</h1>

11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>

12 姓名:<input type="text" name="username" size=20><br>

13 网址:<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

14 密码:<input type="password" name="password" size=20 maxlength=8><br>

15 确认密码:<input type="password" name="password_confirm" size=20 maxlength=8><br>

16 请上传你的照片:<input type="file" name="File"><br>

17 请选择你喜欢的音乐:

18 <input type="checkbox" name="m1" value="rock" checked>摇滚乐

19 <input type="checkbox" name="m2" value="jazz">爵士乐

20 <input type="checkbox" name="m2" value="pop">流行乐<br>

21 请选择你居住的城市:

22 <input type="radio" name="city" value="beijing" checked>北京

23 <input type="radio" name="city" value="shanghai">上海

24 <input type="radio" name="city" value="nanjing">南京<br>

25 <input type="image" name="image" src="10-14.GIF">

26 <input type="hidden" name="Form_name" value="invest">

27 </Form>

28 </body>

29 </html> 文件说明

第26行就是插入的隐藏域。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新XHTML学习
热门XHTML学习
网页设计子分类