CSS 简洁表单布局

最新推荐文章于 2023-01-03 16:17:45 发布

weixin_33834910

最新推荐文章于 2023-01-03 16:17:45 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/bin1991/p/3636641.html

版权

之前对于表单布局，一直使用表格进行布局。总是有那么一点不方便，今天用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>

效果如下，还不错

转载于:https://www.cnblogs.com/bin1991/p/3636641.html

weixin_33834910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 简洁表单布局

之前对于表单布局，一直使用表格进行布局。总是有那么一点不方便，今天用CSS写了一个，感觉还不错，记录一下，可能可能以后都可以抛弃table布局了。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><head&...
复制链接

扫一扫