HTML+CSS基础示范---表单

最近在学习前端设计，从html+css学习，这是一个用HBuilder X编写表单的示范。

注意css和html组件的使用。效果如下，代码在后面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		label{
		width:130px;
		display:inline-block;
		text-align:right;
		padding-right20px;
		font-weight:bold;
		form{
		border:1px solid black;
		width:400px;
		height:450px;
		</style>
	</head>
	<body>
		<form action="https://www.baidu.com" method="post">
		<p>
		<label>用户名:</label>
		<input type="text" style="width:200px; height:30px" value='请输入用户信息'>
		</p>
		<p>
		<label>   昵称:</label>
		<input type="text" style="width:200px; height:30px" value='请输入昵称'>
		</p>
		<p>
		<label>性别:</label>
		<input type="radio" name='gender'>男
		<input type="radio" name='gender'>女
		<input type="radio" name='gender'>保密	
		</p>
		<p>
		<label>教育程度:</label>	
		<select style="height:25px;width:100px"  name="" id="">
			<option value="">高中</option>
			<option value="">初中</option>
			<option value="">大学</option>
		</select>
	
		</p>
	    <p>
		<label>婚姻状况:</label>
		<input type="radio" name='gender'>已婚
		<input type="radio" name='gender'>未婚
		<input type="radio" name='gender'>保密	
		</p>
		
		<label>兴趣爱好:</label>
		<input type="checkbox" name='gender'>踢足球
		<input type="checkbox" name='gender'>打篮球
		<input type="checkbox" name='gender'>看电影
		<br>
		
		<label>描述自己的特点:</label>
		<textarea cols="30" style="width:200px;height:50px"></textarea>
		
		<p>
		<label>文件域:</label>
		<input type="file" >
		</p>
		<p>
		<label></label>
		 <input type="submit" style="width:200px;height:25px" name="" value="           提交            ">
		</p>
		</form>
	</body>
</html>

HTML+CSS基础示范---表单

猜你喜欢