Web前端作业笔记详细记录3

最新推荐文章于 2024-06-10 19:23:05 发布

长高

最新推荐文章于 2024-06-10 19:23:05 发布

阅读量379

点赞数 5

分类专栏：学习笔记文章标签： html5 web css

©长高

本文链接：https://blog.csdn.net/weixin_45677047/article/details/104566024

版权

学习笔记专栏收录该内容

11 篇文章 2 订阅

订阅专栏

这次作业是第三次，里面有表单用法，在浏览之前建议先了解表单并且能够学会使用。
请勿抄袭

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业43</title>
		<style type="text/css"><!--CSS声明-->
			#cu{
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<img src="图片地址"/>
		<img src="图片地址"/>
	<div>
	<form action="URL" method="get" id="user_form"><!--表单的开始-->
		<p>名字：
		<input type="text" /></p>
		<p>密码：
		<input type="password"/>
		</p>
		<p>再次输入密码：
		<input type="password"/>
		</p>
		<p>性别:
		<input type="radio" name="sex" id="male"/>
		<img src="图片地址"/>男
		<input type="radio" name="sex"id="female"/>
		<img src="图片地址"/>女
		</p>
		<p>爱好：
		<input type="checkbox"/>运动
		<input type="checkbox"/>聊天
		<input type="checkbox"/>玩游戏
		</p>
		<p>出生日期：<input name="years" type="text" size="3"/>年
		<select name="months"><!--下拉式列表挑选-->
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
		</select>月
		<input name="days" type="text" maxlength="31" size="1"/>日
		</p>
		<p><input name="reset" type="reset" value="重置"/>
		<input name="submit" type="submit" value="同意"/></p>
	</form>
	</div>
	<p id="cu"><img src="图片地址"/>阅读淘宝网服务协议</p>
	<textarea name="message"rows="4"cols="81">
	<!--定义多行输入字段（文本域）-->
欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。
淘宝的权利和义务
	</textarea>
	</body>
</html>

代码效果图：

在这里插入图片描述
本次作业重点：

表单的基础属性，以及衍生标签规则等等之类的
重点学会input的所有属性
下拉列表的使用
Sumbit与Reset的意义要理解

以上为本次作业的内容，如果你感兴趣不妨点赞并且关注，感谢你的观看！
在这里插入图片描述

长高

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web前端作业笔记详细记录3

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业43</title> <style type="text/css"> #cu{ font-weight: 900; } </style> &...
复制链接

扫一扫