基于CSS3实现表单特效



30 118 40



特效描述:基于CSS3实现 表单特效,基于CSS3实现表单特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />

2. HTML代码

	<form>
		<fieldset>
			<legend>Some information about you</legend>
			<label for="fullname">Name:</label>
			<input type="text" id="fullname" />
			<p>Gender:</p>
			<p><input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label></p>
			<p><input type="radio" value="Female" id="female" name="gender" /> <label for="female">Female</label></p>
			<p>Stuff you like:</p>
			<p><input type="checkbox" value="CSS3" id="css3" /> <label for="css3">CSS3</label></p>
			<p><input type="checkbox" value="HTML5" id="html5" /> <label for="html5">HTML5</label></p>
			<p><input type="checkbox" value="JavaScript" id="javascript" /> <label for="javascript">JavaScript</label></p>
			<p><input type="checkbox" value="Other" id="other" /> <label for="other">Other</label></p>
		</fieldset>
		<fieldset>
			<legend>What happens when I specify disabled or checked attributes?</legend>
			<p>Disabling and checking radio inputs:</p>
			<p><input type="radio" value="disabled" id="disabled" name="disabled" disabled /> <label for="disabled">This is disabled</label></p>
			<p><input type="radio" value="check" id="check" name="check" checked /> <label for="check">This is checked</label></p>
			<p>Disabling and checking checkbox inputs:</p>
			<p><input type="checkbox" value="disabled" id="disabled2" disabled /> <label for="disabled2">This is disabled</label></p>
			<p><input type="checkbox" value="check" id="check2" checked /> <label for="check2">This is checked</label></p>
			<p><input type="checkbox" value="Stop" id="disablecheck" disabled checked /> <label for="disablecheck">This is checked and disabled</label></p>
			<p><input type="checkbox" value="Other" id="other2" /> <label for="other2">Other</label></p>
		</fieldset>
		<fieldset>
			<legend>Contact info</legend>
			<label>Email:</label>
			<input type="email" />
			<p>Subscribe to newsletter:</p>
			<p><input type="radio" value="yes" id="yes" name="subscribe" /> <label for="yes">Yes</label></p>
			<p><input type="radio" value="no" id="no" name="subscribe" /> <label for="no">No</label></p>
			<p>Tick the information you would like to hear about:</p>
			<p><input type="checkbox" value="Rich" id="rich" /> <label for="rich">I would like to here about the how the CSS Ninja can make me rich</label></p>
			<p><input type="checkbox" value="Poor" id="poor" /> <label for="poor">How the CSS Ninja can make me poor</label></p>
			<p><input type="checkbox" value="Stop" id="stop" /> <label for="stop">Please make the CSS Ninja stop from trying to make me rich or poor</label></p>
			<p><input type="checkbox" value="Other" id="other3" /> <label for="other3">Other</label></p>
		</fieldset>
	</form>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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