现在的位置: 首页 > 综合 > 正文

CSS 简洁表单布局

2014年08月29日 ⁄ 综合 ⁄ 共 1117字 ⁄ 字号 评论关闭

之前对于表单布局,一直使用表格进行布局。总是有那么一点不方便,今天用CSS写了一个,感觉还不错,记录一下,可能可能以后都可以抛弃table布局了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
	<head>
		<style type="text/css">

			label{
				margin-left: 50px;
				width: 80px;
				text-align:right;
			}
			form{
				margin:0px
			}
			input{
				width: 180px;
				border:1px solid #808080
			}

			input.sexRadio{
				width: 50px;
			} 
			textarea{
				width: 400px;
				height: 150px;
			}

			select{
				width: 180px;
			}

			#sbutton{
				margin-left: 380px;
				margin-top: 5px;
				width:80px;
			}
		</style>
	</head>

	<body>
		

		<form >
			<p>
				<label for="user">姓名:</label>
				<input type="text" id="user"/>
					
				<label>性别:</label>	
				<input class = "sexRadio" type="radio" name="sex" value="male" /> 男
				<input class = "sexRadio" type="radio" name="sex" value="female" /> 女
			</p>

			<p>
				<label for="phone">电话:</label>
				<input type="text" id="phone"/>

				<label>地区:</label>
				<select name="country">
					<option value="China">中国</option>
					<option value="America">美国</option>
					<option value="Britain">英国</option>
				</select>
			<p>

			<p>	
				<label for="comment">备注:</label>
				<textarea id=comment name="comment">
				</textarea>
			<p>
			<br />

			<input type="submit" id="sbutton" value="确定" /><br />
		</form>
	</body>

</head>

效果如下,还不错

抱歉!评论已关闭.