A04-关于表单和表格的一个小练习

最新推荐文章于 2024-08-11 02:49:42 发布

幼儿园的高财生

最新推荐文章于 2024-08-11 02:49:42 发布

阅读量132

点赞数

分类专栏：前端文章标签： html 前端表单和表格小练习

本文链接：https://blog.csdn.net/m0_58086930/article/details/127140799

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.要求：

2.相关知识链接：

(6条消息) A02-HTML5入门_我行我素，向往自由的博客-CSDN博客

(6条消息) A03-HTML5框架和表单_我行我素，向往自由的博客-CSDN博客

3.代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1.作业训练</title>
		<meta name='author' content="张梦姣,zmj">
		
	</head>
	<body>
		<h3 align='center'>作业要求</h3>
		<img src="img/作业表单和表格.png"width='500' alt="请刷新一下" title="作业表单和表格">
		
		<hr/>
		<h3 align='center'>2.我的作业展示</h3>
		<form>
			<table border='2px' align="center" width='500' height='450'>
				<tr >
					<td width='100px'>用户名</td>
					<td><input type="text"/></td>
				</tr>
				<tr>
					<td width='100px'>照片</td>
					<td><input type="file"</td>
				</tr>
				<tr>
					<td width='100px'>密码</td>
					<td><input type="password"></td>
				</tr>
				<tr>
					<td width='100px'>确认密码</td>
					<td><input type="password"></td>
				</tr>
				<tr>
					<td width='100px'>性别</td>
					<td>
						男：<input type="radio" name="sex" value="男" checked/>
						女：<input type="radio" name="sex" value="女"/>
					</td>
				</tr>
				<tr>
					<td width='100px'>爱好</td>
					<td>
						音乐：<input type="checkbox" name='爱好' value="音乐" checked/>
						篮球：<input type="checkbox" name='爱好' value="篮球" checked/>
						看书：<input type="checkbox" name='爱好' value="看书"/>
					</td>
				</tr>
				<tr>
					<td width='100px'>学历</td>
					<td>
						<select>
							<option selected>本科</option>
							<option>研究生</option>
							<option>博士</option>
							<option>博士后</option>
						</select>
					</td>
				</tr>
				<tr>
					<td width='100px'>手机号</td>
					<td><input type="number"></td>
				</tr>
				
				<tr height='25%'>
					<td width='100px'>自我介绍</td>
					<td><textarea placeholder="自我介绍" cols="50" rows="7"></textarea></td>
				
				<tr align="center">
					<td width='100px' colspan="2">
						<input type="submit" value="注册">
						<input type="reset" value="重置">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>