原生js表單美化制作注冊個人信息提交表單代碼



251 1003 335



特效描述:表單美化制作 注冊個人信息 提交表單,

代碼結構

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

加群請備注:從官網了解到

老夫子电子