HTML5+CSS3新增表单域Word文件下载.docx
- 文档编号:18414608
- 上传时间:2022-12-16
- 格式:DOCX
- 页数:12
- 大小:703.20KB
HTML5+CSS3新增表单域Word文件下载.docx
《HTML5+CSS3新增表单域Word文件下载.docx》由会员分享,可在线阅读,更多相关《HTML5+CSS3新增表单域Word文件下载.docx(12页珍藏版)》请在冰豆网上搜索。
html>
body>
formaction="
Email_check.html"
method="
get"
>
E-mail:
<
user_email"
br/>
submit"
/form>
/body>
/html>
执行上述代码,在网页中输入一个错误格式的Email地址,并单击【提交】按钮。
此时,将在“文本框”的下面弹出一个提示信息框,并提示“请输入一个有效的电子邮件地址”。
例如,再创建一个“Email_check.html”文件,并验证输入正确的Email地址后,显示跳转效果。
3-5Email_check.html
head>
metacharset="
utf-8"
title>
Email地址<
/title>
/head>
h3>
您输入的Email地址正确!
/h3>
再次,执行“Email类型.html”文件,并在网页中,输入正确的Email地址。
然后,单击【提交】按钮,并判断是否验证成功,而跳转到“Email_check.html”文件。
2.URL地址(url域)
URL类型用于应该包含URL地址的输入域。
当提交表单时,会自动验证URL域的值是存为正确的格式。
url"
user_url"
/>
该类型只验证协议,不验证有效性,比如用户直接输入一个123,它会自动给添加“http:
//”头协议。
3-6URL.html
URL类型<
Default.aspx"
URL:
执行上述代码,在【URL:
】文本框中,输入“”内容。
然后,当鼠标离开文本框时,将在内容前面添加“http:
3.数字信息(number域)
在HTML5之前,如果用户想输入数字的话,只能通过“文本框”来实现。
并且,还需要用户通过代码进行验证内容,并转换格式等。
但有了number类型时,用户可以非常方便的添加包含数值的输入域。
用户还能够设定对所接受的数字的限定。
number"
points"
min="
1"
max="
10"
在该类型的<
input>
标签中,还包含了对数字进行限定的属性,如表所示。
属性
值
描述
max
number
规定允许的最大值。
min
规定允许的最小值。
step
规定合法的数字间隔(如果step="
3"
,则合法的数是-3,0,3,6等)。
value
规定默认值。
下面通过示例,来了解一下该类型的数字文本框,输入内容后如何进行验证。
3-7number.html
添加数字类型数字框<
step="
5"
20"
value="
0"
执行上述代码,在网页中将显示出一个微调的数字框。
用户可以在数字框中,单击【向上】微调按钮
或者【向下】微调按钮
,来调整数字框中数字的大小。
由于在<
标签中,已经设置step属性值为5,所以每当单击微调按钮时,都将以+5或者-5的方式改变数字。
例如,在数字框中,输入“0”数字后,并单击【提交】按钮,将弹出的提示信息。
因此,在<
标签中,所设置数字的最小值为5,所以弹出提示信息。
4.滑动条(range域)
range类型用于应该包含一定范围内数字值的输入域。
range类型显示为一个滑动条,用户可以设定对所接受的数字的限定。
range"
通过上述语法,可以了解到在设置滑动条时,还可以设置属性来规定对数字范围的限定。
下面通过一个示例,来了解一个滑动条的生成效果。
3-8range.html
制作滑动条<
formmethod="
post"
h4>
音量控制<
/h4>
"
outputname="
result"
/output>
通过执行上述代码,可以在浏览器中成生一个滑动条,并且滑动条上显示了刻度线。
5.日期数据(Datepickers)
HTML5拥有多个可供选取日期和时间的新输入类型:
●Date选取日、月、年。
●Month选取月、年。
●Week选取周和年。
●Time选取时间(小时和分钟)。
●Datetime选取时间、日、月、年(UTC时间)。
●datetime-local选取时间、日、月、年(本地时间)。
在<
标签中,用户可以分别设置type类型为,上述类型之一。
即可在网页中,接收及验证数据。
3-9Date_pickers.html
DatePickers日期数据<
../Default.aspx"
Date:
date"
month:
month"
week:
week"
time:
time"
datetime:
datetime"
datetime-local:
datetime-local"
通过执行上述代码,用户可以看到所显示接收不同日期类型的数据。
在该页面中,单击Date后面的【下向】按钮
,即可弹出日期选择器。
在【日期】选择器中,用户可以单击【向左】和【向右】按钮,来调整月份。
也可以在“年份”框中,输入年份或者单击微调按钮,调整年份。
6.搜索(search域)
search类型用于搜索域,比如站点搜索或Google搜索。
search域显示为常规的文本域。
search"
搜索"
下面通过一个示例,来了解一下search类型的应用。
3-10search.html
搜索文本框<
list.asp"
search_name"
通过执行上述代码,即可在页面中生成一个搜索文本框。
当用户单击【搜索】按钮后,则在【地址】栏中,将自动以?
(问题)传递参数的方式,将search类型的name名称等文本框内容的值传递到指定页面。
7.颜色选择器(color域)
在HTML5之前,如图在网页中选择某种颜色,则需要非常复杂的程序来完成。
Color域对象,使用用户操作起来非常方便。
color"
#34538b"
下面通过一个示例,来了解一下color类型的应用。
3-11color.html
请选择颜色:
inputstyle="
width:
150px;
type="
color_name"
执行上述代码,则在“请选择颜色:
”文本后面,添加了一个下拉的颜色选择框。
用户单击【下拉】按钮
,即可弹出一个由多个颜色图块组的颜色选择框。
在颜色选择框中,单击【其它…】按钮,即可弹出【颜色】选择器。
在该选择器中,可以选择不同颜色的图块,通过滑动选择颜色深浅等。
用户也可以通过R(红)G(绿)U(蓝)值,选择颜色。
或者,通过E(色调)S(饱和度)L(亮度),调整颜色。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5+CSS3 新增表单域 HTML5 CSS3 新增 表单
![提示](https://static.bdocx.com/images/bang_tan.gif)