这是我第一次接触网页制作,没想到一个简简单单的网页,要想实现起来要用到很多的标签。第一次是做学生信息注册页面,用到了
- <div>分块:
<div id="学生信息注册">...</div>
- 文本、密码输入框:
<form method="post" action="学生信息注册页面">
<input type="text" name="myName">
<input type="password" name="myPass"> 注:当type="password"时,为密码输入框
- 下拉列表框(可单选也可多选):
<label>专业:</label>
<select>
<option value="计算机科学与技术">计算机科学与技术</option>
<option value="空间信息与数学技术">空间信息与数学技术</option>
<option value="物联网工程">物联网工程</option>
<option value="电子信息科学与技术">电子信息科学与技术</option>
<option value="通信工程">通信工程</option>
<option value="遥感科学与技术">遥感科学与技术</option>
<option value="信息与计算科学">信息与计算科学</option>
</select>
当<select>开始标签改为<select multiple="multiple">时,可进行多选项 注:ctrl+选择项即可实现多项选择。
- 单选框和复选框:
单选:<input type="radio" value="男" name="性别">男 <input type="radio" value="女" name="性别">女 多选: <input type="checkbox" value="篮球" name="篮球">篮球
<input type="checkbox" value="排球" name="排球">排球
- 多行的文本域:
<textarea rows="80px" cols="30px"></textarea> 注:rows设置行数,cols设置列数。
- 上传浏览照片:
<div id="tbody">
<div >
<p>
<label>上传照片:</label>
<input type="file" id="file" class=" btn btn-default" style="height: 25px; width: 220px;text-align-last: 0;" />
<br>
</p>
</div>
一些零散的还有<br>相当于回车换行  表示空格 等等......
最后的居中对齐我采用了,加一个文本框<table>
在<style>中用table{ margin:0 auto; }实现文本框的居中对齐。
下面是实现的最后界面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学生信息注册页面</title>
<style>
table,table tr th, table tr td { border:1px solid #0094ff; }
table {border: 1px solid #151515}
table
{
margin:0 auto;
}
</style>
</head>
<body>
<div id="学生信息注册">
<form method="post" action="学生信息注册页面">
<h1 style="font-family:'微软雅黑';font-size:25px;text-align:center;">学生信息注册</h1>
<br><br>
<table><tr><td>
姓名:
<input type="text" name="myName">
<br><br>
性别:
<input type="radio" value="男" name="性别">男
<input type="radio" value="女" name="性别">女
<br><br>
出生日期:
<input type="text" name="myBirthday">
<br><br>
学校:
<input type="text" name="myBirthday">
<br><br>
<label>专业:</label>
<select>
<option value="计算机科学与技术">计算机科学与技术</option>
<option value="空间信息与数学技术">空间信息与数学技术</option>
<option value="物联网工程">物联网工程</option>
<option value="电子信息科学与技术">电子信息科学与技术</option>
<option value="通信工程">通信工程</option>
<option value="遥感科学与技术">遥感科学与技术</option>
<option value="信息与计算科学">信息与计算科学</option>
</select>
<br><br>
体育特长:<input type="checkbox" value="篮球" name="篮球">篮球
<input type="checkbox" value="排球" name="排球">排球
<input type="checkbox" value="足球" name="足球">足球
<input type="checkbox" value="游泳" name="游泳">游泳
<div id="tbody">
<div >
<p>
<label>上传照片:</label>
<input type="file" id="file" class=" btn btn-default" style="height: 25px; width: 220px;text-align-last: 0;" />
<br>
</p>
</div>
密码:
<input type="password" name="myPass">
<br><br>
个人介绍:
<textarea rows="80px" cols="30px"></textarea>
<br><br>
<input type="submit" value="提交" name="submit" />
<input type="reset" value="取消" name="reset" />
</td></tr></table>
</form>
</div>
</body>
</html>