现应用HTML5的新增元素制作一个网站上常用的简单用户注册页面,主要代码如下:
<body>
<h1>注册表单</h1>
<formid=regFormonsubmit="returnchkForm();"method=post>
<fieldset>
<ol>
<li><labelfor=username>用户昵称:</label><inputid=usernamename=username
autofocusrequired>
<li><labelfor=uemail>Email:</label><inputid=uemail type=emailname=uemail
requiredplaceholder="example@domain.com">
<li><labelfor=age>工作年龄:</label><inputid=agetype=range name=range1max="60"min="18"><outputonforminput="value=range1.value">30</output>
<li><labelfor=age2>年龄:</label><inputid=age2type=numberrequired
placeholder="yourage">
<li><labelfor=birthday>出生日期:</label><inputid=birthdaytype=date>
<li><labelfor=search>个人主页:</label><inputid=search type=url
requiredlist="searchlist">(https://www.xing528.com)
<datalistid=searchlist>
<optionlabel="Google"value="http://www.google.com"/>
<optionlabel="Yahoo"value="http://www.yahoo.com"/>
<optionlabel="Bing"value="http://www.bing.com"/>
<optionlabel="Baidu"value="http://www.baidu.com"/>
</datalist></li>
</ol>
</fieldset>
<div><buttontype=submit>注册</button></div></form>
</body>
其运行结果如图5.23所示。
图5.23 制作注册表单
网页元素没有加上对文字、位置、背景等修饰,显示效果不好看。为了达到较好的显示效果,可加上如下样式表代码来修饰网页元素:
样式修饰后注册表单的显示结果如图5.24所示。
图5.24 加上样式表后的注册表单
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。
