HTML5+CSS3 制作一个宠物信息的表单

最新推荐文章于 2024-05-28 15:56:40 发布

晚晚昨晚吃晚饭很晚睡说晚

最新推荐文章于 2024-05-28 15:56:40 发布

阅读量306

点赞数 1

分类专栏： HTML5+CSS3 学习打卡文章标签： html5 css3 html

本文链接：https://blog.csdn.net/qq_55786319/article/details/120839519

版权

学习打卡同时被 2 个专栏收录

71 篇文章 2 订阅

订阅专栏

HTML5+CSS3

15 篇文章 9 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>汪汪</title>
<style>
	body{background-color: antiquewhite;}	
</style>	
</head>

<body>
	<form action="" method="post">
	<fieldset>
	<legend>主人信息</legend>
	<label for="username">姓名：</label>		
	<input id="username" type="text" name="username"/>
			
	<label for="age">年龄:</label>		
	<input id="age" type="text" name="age"/>
	</fieldset>
	
	<fieldset>
	<legend>修狗勾信息</legend>
	<label for="doggiename">狗勾名</label>
	<input id="doggiename" type="text" name="doggiename"/>
		
	<label>狗勾种类</label>
	<select id="kind" name="kind">
		<option value="goldenRetriever">金毛</option>
		<option value="alaska">阿拉斯加</option>
		<option value="shibaInu">柴犬</option>
		<option value="husky">哈士奇</option>
		<option value="Samoyed">萨摩耶</option>
	</select>
		<br>
		
	<label>狗勾性别</label>
	<input type="radio" value="masculine" name="doggyGender"/>公
	<input type="radio" value="feminine" name="doggyGender"/>母
		<br>
	
	<label>狗勾特点</label>
	<input type="checkbox" name="features" value="lazy"/>懒
	<input type="checkbox" name="features" value="naughty"/>调皮
	<input type="checkbox" name="features" value="crazy"/>疯狂		
		<br>
		
	<label for="weight">体重(kg)</label>
	<input id="weight" type="range" name="weight" max="50" min="5"/>
		<br>
	<p id="myweight"></p>	
	<label for="extrainfo">额外信息</label>
		<br>
			
	<textarea id="extrainfo" name="extrainfo" cols="30" rows="10">hhhh</textarea>
		<br>
	<input type="reset" value="重置"/>
	<input type="submit" value="提交"/>
	</fieldset>
	</form>
	
	<script>
		var w=document.getElementById("myweight");
		var winput=document.getElementById("weight");
		window.onload=function assignvalue()
		{
			w.innerHTML=winput.value+"kg";
		}
		winput.onchange=function assignvalue()
		{
			w.innerHTML=winput.value+"kg";
		}
	</script>
</body>
</html>

在这里插入图片描述
表单主要由form元素统领，然后由fieldset作为不同表单域的逻辑划分。label指示需要填写的信息，for属性指定该标签与哪一个输入控件进行捆绑，与被捆绑输入控件的id属性名称相同即可。

input标签的type属性指定了这一输入控件的类型，例如为radio时，就表示单选按钮输入控件，通过将一组type属性为radio的input标签设置同样的name属性即可实现多个选项进行单项选择的功能。name指定了这一输入内容的命名，这个命名会与输入内容组成键值对保存到所提交表单的HTTP报文中，并可被服务器端通过这一命名来获取输入值。

textarea标签可以让用户进行多行文本的输入，cols表示横向长度，rows表示纵向长度。

后面增加了小部分JavaScript代码实现滑动条取值功能。
随书练习，坚持打卡。

晚晚昨晚吃晚饭很晚睡说晚

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3 制作一个宠物信息的表单

<!doctype html><html><head><meta charset="utf-8"><title>汪汪</title><style> body{background-color: antiquewhite;} </style> </head><body> <form action="" method="post"> <fieldset
复制链接

扫一扫