原生js表单美化制作注册个人信息提交表单代码



236 941 314



特效描述:表单美化制作 注册个人信息 提交表单,

代码结构

1. 引入CSS

<link href="style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="script.js"></script>

3. HTML代码

<dl class="formbox">
	<form action="http://www.baidu.com" method="get">
		<dt>填写基本信息</dt>
		<dd><input id="name" name="name" type="text" class="text" value="尊姓大名" /></dd>
		<dd><input id="contact" name="contact" type="text" class="text" value="联系QQ或MSN" /></dd>
		<dd style="z-index: 2;">
			<div id="btn_come_from_drop_down" class="select_normal"></div>
			<input id="come_from" name="come_from" type="text" class="text" value="你来自哪里?" />
			<ul id="come_from_drop_down" class="area">
				<li class="active">北京</li>
				<li>上海</li>
				<li>杭州</li>
				<li>深圳</li>
				<li>妙味课堂</li>
				<li>乌鲁木奇</li>
				<li>哈尔滨</li>
				<li>天津</li>
				<li>湖北</li>
				<li>海南</li>
			</ul>
		</dd>
		<dd class="clear">
			<input id="gender" name="gender" type="hidden" />
			<h2>性别</h2>
			<ul class="sex">
				<li id="gender_man" title="男" class="men_active"></li>
				<li id="gender_woman" title="女" class="woman_normal"></li>
			</ul>
		</dd>
		<dd class="clear">
			<input id="hobby" name="hobby" type="hidden" />
			<h2>爱好</h2>
			<ul id="hobby_drop_down" class="hobby">
				<li>上网</li>
				<li>看电影</li>
				<li>游泳</li>
				<li>打篮球</li>
				<li>唱歌</li>
				<li>旅游</li>
			</ul>
		</dd>
		<dd>
			<h2>就这样!</h2>
			<div class="btn"><input type="submit" value="提交" /></div>
		</dd>
	</form>
</dl>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 选项卡自动切换 注册框 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到