首页 理论教育 使用新增元素来制作注册表单

使用新增元素来制作注册表单

时间:2026-01-22 理论教育 东北妞 版权反馈
【摘要】:图5.23制作注册表单网页元素没有加上对文字、位置、背景等修饰,显示效果不好看。图5.24加上样式表后的注册表单

现应用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 加上样式表后的注册表单

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈