<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.form_con{
width: 400px;
height: 460px;
background:#f2f2f2;
margin: 50px auto 0;
padding: 20px;
}
.form_con label{
width: 80px;
text-align: right;
/* 在这里用浮动的原因是因为lable和input都是行元素,不换行,所以用浮动会让其自动排列,
又因为两个的长度比较长致使下面的标签会在其下面排列 */
float: left;
}
.form_con h3{
margin: 0px;
border-bottom: 1px solid #ddd;
font-size: 22px;
line-height: 50px;
}
.input_text{
width: 240px;
height: 24px;
border: 0;
outline: none;
}
.input_text2{
width: 240px;
height: 24px;
}
.input_select{
width: 120px;
height: 24px;
}
.m180{
margin-left: 80px;
}
</style>
</head>
<body>
<div class="form_con">
<h3>注册表单</h3>
<form action="">
<label for="">姓名:</label>
<input type="text" name="" id="" class="input_text">
<br>
<br>
<label for="">密码:</label>
<input type="password" name="" id="" class="input_text">
<br>
<br>
<label for="">性别:</label>
<!-- 两个选一个是因为name设置了相同的值 -->
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
<br>
<br>
<label for="">爱好:</label>
<!-- 多重选择用checkbox -->
<input type="checkbox" name="like" value="0">唱歌
<input type="checkbox" name="like" value="1">跑步
<input type="checkbox" name="like" value="2">游泳
<br>
<br>
<label for="">照片</label>
<!-- 选择文件只需要将type设成file即可 -->
<input type="file" name="person_pic">
<br>
<br>
<label for="">个人描述:</label>
<!-- 这里比较特殊,个人描述这一块的效果用input文本框是做不出来的,要用textarea -->
<textarea name="about" id="" cols="30" rows="10" class="input_text2"></textarea>
<br>
<br>
<label for="">籍贯:</label>
<select name="" id="" class="input_select">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
<br>
<br>
<input type="submit" value="提交" class="m180">
<input type="reset" value="重置">
</form>
</div>
</body>
</html>
代码完成后的效果如下:
