首页 > 网页制作 > HTML/Xhtml

HTML表单标记教程(3):输入标记

admin HTML/Xhtml 2022-02-05 02:44:32 标记   输入   教程   &lt   &quot   name   type   input   value   &gt"

HTML表单标记教程,这节主要讲解如何在网页中使用INPUT标记,主要介绍INPUT标记的属性的使用.
输入标记是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。
基本语法 01
02 03
语法解释
标记的属性如下表所示 属性 描述 name 域的名称 type 域的类型
在type属性中,包含以下属性值 type属性值 描述 text 文字域 password 密码域 file 文件域 checkbox 复选框 radio 单选框 button 普通按钮 submit 提交按钮 reset 重置按钮 hidden 隐藏域 image 图像域(图像按钮)
文字域TEXT
text属性值用来设定在表单的文本域中,输入任何类型的文本、数字或字母。输入的内容以单行显示。
基本语法
语法解释
这些属性的含义如下表所示 文字域属值 描述 name 文字域的名称 maxlength 文字域的最大输入字符数 size 文字域的宽度 value 文字域的默认值 文件范例:11-6.htm
在页面中插入文字域。
01
02
03
04
05
06
07 插入文字域
08
09
10

用户调查


11

12 姓名:
13

14 网址:
15

16

17
18 文件说明
第11行是表单标记,表单的名称为invest,将表单内容以电子邮件的方式传送,并使用get传输方式。第12行设定"性名"的文本框为20字符宽度,第14行设定"网址"的文本框为20字符宽度,但最大可以输入50个字符,并且显示"http://"的初始值。
密码域PASSWORD
在表单中还有一种文本域的形式为密码域,输入到文本域中的文字均以星号"∗"或圆点显示。
基本语法
语法解释
这些属性的含义如下表所示 文字域属性 描述 name 密码域的名称 maxlength 密码域的最大输入字符数 size 密码域的宽度(以字符为单位) value 密码域的默认值 文件范例:11-7.htm
在页面中插入密码域。
01
02
03
04
05
06
07 插入密码域
08
09
10

用户调查


11

12 姓名:
13

14 网址:
15

16 密码:
17

18 确认密码:
19

20
21 文件说明
第16行和第18行是密码域。设定了密码域的尺寸、名称和最大输入字符数。
文件域FILE
文件域可以让用户在域的内部填写自己硬盘中的文件路径,然后通过表单上传,这是文件域的基本功能。如在线发送E-mail时常见的附件功能。有的时候要求用户将文件提交给网站,例如Office文档、浏览者的个人照片或者其它类型的文件,这时就要用到文件域。
文件域的外观是一个文本框加一个浏览按钮,用户既可以直接将要上传给网站的文件的路径写在文本框内,也可以单击浏览按钮,在自己的电脑中找到要上传的文件。
基本语法
文件范例:11-8.htm
在页面中插入文件域。
01
02
03
04
05
06
07 插入文件域
08
09
10

用户调查


11

12 姓名:

13 网址:

14 密码:

15 确认密码:

16 请上传你的照片:
17

18
19 文件说明
第16行就是插入的文件域。 复选框CHECKBOX
浏览者填写表单时,有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查,首先提出调查的问题,然后让浏览者在若干个选项中进行选择。又例如收集个人信息时,要求在个人爱好的选项中进行选择等。适应以上各种不同类型调查的需要,选择域分为两种。 多选框:可以在若干选项中选择多个项目 单选框:在若干选项只允许选择一项
复选框能够进行项目的多项选择,以一个方框表示。 基本语法
语法解释
checked表示此项被默认选中,value表示选中项目后传送到服务器端的值。 文件范例:11-9.htm
在页面中插入复选框。
01
02
04
05
06
07
08 插入复选框
09
10
11

用户调查


12

13 姓名:

14 网址:

15 密码:

16 确认密码:

17 请上传你的照片:

18 请选择你喜欢的音乐:
19 摇滚乐
20 爵士乐
21 流行乐
22

23
24 文件说明
第18行到20行就是插入的复选框。其中每一个复选框有其独立的名称和值,"摇滚乐"项目是被默认选中的。
单选框RADIO
单选框能够进行项目的单项选择,以一个圆框选择。
基本语法
语法解释
checked表示此项被默认选中,value表示选中项目后传送到服务器端的值。 文件范例:11-10.htm
在页面中插入单选框。
01
02
03
04
05
06
07 插入单选框
08
09
10

用户调查


11

12 姓名:

13 网址:

14 密码:

15 确认密码:

16 请上传你的照片:

17 请选择你喜欢的音乐:
18 摇滚乐
19 爵士乐
20 流行乐

21 请选择你居住的城市:
22 北京
23 上海
24 南京
25

26
27 文件说明
第22行到第24行就是插入的单选框。其中每一个单选框的名称是相同的,有其独立的值,"北京"项目是被默认选中的。
普通按纽BUTTON
表单中的按钮起着至关重要的作用。按钮可以激发提交表单的动作,可以在用户需要修改表单的时候,将表单恢复到初始的状态,还可以依照程序的需要,发挥其它作用。普通按钮主要是配合JavaScript脚本来进行表单的处理。
基本语法
语法解释
value值代表显示在按钮上面的文字。 文件范例:11-11.htm
在页面中插入普通按钮。
01
02
03
04
05
06
07 插入普通按钮
08
09
10

用户调查


11

12 姓名:

13 网址:

14 密码:

15 确认密码:

16 请上传你的照片:

17 请选择你喜欢的音乐:
18 摇滚乐
19 爵士乐
20 流行乐

21 请选择你居住的城市:
22 北京
23 上海
24 南京

25
26

27
28 文件说明
第25行就是插入的普通按钮。
提交按纽SUBMIT
单击提交按钮后,可以实现表单内容的提交。
基本语法
文件范例:11-12.htm
在页面中插入提交按钮。
01
02
03
04
05
06
07 插入提交按钮
08
09
10

用户调查


11

12 姓名:

13 网址:

14 密码:

15 确认密码:br>
16 请上传你的照片:

17 请选择你喜欢的音乐:
18 摇滚乐
19 爵士乐
20 流行乐

21 请选择你居住的城市:
22 北京
23 上海
24 南京

25
26

27
28 文件说明
第25行就是插入的提交按钮。
重置按纽RESET
单击重置按钮后,可以清除表单的内容,恢复默认的表单内容设定。
基本语法
文件范例:11-13.htm
在页面中插入重置按钮。
01
02
03
04
05
06
07 插入重置按钮
08
09
10

用户调查


11

12 姓名:

13 网址:

14 密码:

15 确认密码:

16 请上传你的照片:

17 请选择你喜欢的音乐:
18 摇滚乐
19 爵士乐
20 流行乐

21 请选择你居住的城市:
22 北京
23 上海
24 南京

25
26
27

28
29 文件说明
第26行就是插入的重置按钮。
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/HTML/72121.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持