HTML网页设计基础——用户注册界面
·
要求网页中显示如下信息:
首先对网页布局进行分析,包含两个部分,标题和表格部分:
定义表格---->将网页中的表单元素根据上图所示放入不同的行和列中。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>注册页面综合案例</title>
</head>
<body >
<h1>青春不常在,抓紧谈恋爱</h1>
<table width="500">
<tr>
<td>
性别:
</td>
<td>
<label for="男">
<input type="radio" name="sex" id="男">男
<label for="女">
<input type="radio" name="sex" id="女">女
</td>
</tr>
<tr>
<td>
生日:
</td>
<td>
<select>
<option selected="selected">
--请选择年--
</option>
<option>
1990
</option>
<option>
1991
</option>
<option>
1992
</option>
<option>
1993
</option>
<option>
1994
</option>
<option>
1995
</option>
</select>
<select>
<option selected="selected">
--请选择月--
</option>
<option>
1月
</option>
<option>
2月
</option>
<option>
3月
</option>
<option>
4月
</option>
</select>
<select>
<option selected="selected">
--请选择日--
</option>
<option>
1日
</option>
<option>
2日
</option>
<option>
3日
</option>
<option>
4日
</option>
</select>
</td>
</tr>
<tr>
<td>
所在地区:
</td>
<td>
<input type="text" name="area" value="地区">
</td>
</tr>
<tr>
<td>
婚姻状况:
</td>
<td>
<input type="radio" name="s" checked="checked">未婚<input type="radio" name="s">已婚<input type="radio" name="s">离婚
</td>
</tr>
<tr>
<td>
学历:
</td>
<td>
<input type="text" value="博士后">
</td>
</tr>
<tr>
<td>
喜欢的类型:
</td>
<td>
<input type="checkbox" name="S">妩媚的<input type="checkbox" name="S">可爱的<input type="checkbox" name="S">小鲜肉<input type="checkbox" name="S">都喜欢
</td>
</tr>
<tr>
<td>
自我介绍:
</td>
<td>
<textarea>
介绍一下自己吧!
</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="注册">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" value="checked">我同意注册条款和加入会员标准
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="http://xysf.cn">我是会员,立即登录</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18周岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
注意:
该实例包含的行和单元格的个数比较多,在书写代码的时候注意不要漏写,可以使用空格隔开,以便于检查。
表格后几行的第一个单元格是没有内容的,虽然没有内容,但是还是需要定义空格单元格,这样才能保证和要求的表格一致。
更多推荐
已为社区贡献1条内容
所有评论(0)