编写基本注册新用户表单,实现用户名,密码,再次输入密码以及性别等,使用单选框,复选框,文本域以及按钮等组件,代码如下:
//html代码
<form action="test.jsp" method="post" name="book" οnsubmit="return check()">
<h1>注册新用户</h1>
<fieldset>
<legend>个人信息</legend>
<div class="left">
<label for="user">用户名:</label><br>
<label for="pwd">密码: </label><br>
<label for="pwd2">再次输入密码:</label><br>
性别: <br>
喜爱的新闻类别: <br>
</div>
<div class="right">
<input type="text" id="user" placeholder="至少6位字母和数字"><br>
<input type="text" id="pwd" placeholder="至少6个字符"><br>
<input type="text" id="pwd2"><br>
<input type="radio" name="sex" id="man">
<label for="man">男</label>
<input type="radio" name="sex" id="woman">
<label for="woman">女</label><br>
<select id="news">
<option value="">科技</option>
<option value="">计算机</option>
</select>
</div>
</fieldset>
<div class="banner">
<input type="checkbox" οnclick="agree()" id="chBox1">
<span>同意下列服务协议条款</span>
<input type="button" value="提交" class="btn" id="btn1" disabled=true οnclick="submit1()">
</div>
<textarea id="textarea" disabled>
******************************************************************************************************************************************************************************************************************************************************************************************************************************************
</textarea>
</form>
//css代码
* {
padding: 0;
margin: 0;
}
form {
width: 762px;
height: 482px;
border: 1px solid black;
margin: 20px auto;
}
form h1 {
height: 83px;
line-height: 83px;
margin:10px 426px 5px 171px;
}
form fieldset {
padding: 10px;
margin: 20px 171px;
}
form fieldset legend {
margin-left: 10px;
}
form fieldset .left {
display: inline-block;
margin-left: 10px;
}
form fieldset .right {
display: inline-block;
margin-left: 40px;
}
.right input {
color: gray;
}
form .banner {
margin: 10px 233px;
}
form .banner .btn {
width: 100px;
}
form textarea {
margin: 5px 171px;
width: 400px;
height: 132px;
padding: 7px 10px 0 7px;
background-color: #fff;
}