网页设计:表单

本文详细探讨了网页设计中的表单元素,包括基本的表单语法、文本框、单选按钮、复选框、列表框、按钮、多文本输入以及隐藏域、只读和禁用等特性,旨在帮助读者理解和掌握网页交互设计的关键要素。

表单的使用

基本的表单语法在这里插入图片描述
表单的元素格式

在这里插入图片描述

文本框在这里插入图片描述
单选按钮在这里插入图片描述
复选框在这里插入图片描述
列表框在这里插入图片描述#### 按钮在这里插入图片描述
多文本在这里插入图片描述
隐藏域、只读、禁用在这里插入图片描述在这里插入图片描述

代码测试:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form method="post" action="">
			<!--<fieldset>-->
					<legend >用户名:</legend>
					<p><input name"userName" type="text" id="txt"></p>
					<legend >用户密码:</legend>
					<p><input name="password" type="password"></p>
					
					<!--单选框-->
					<input name="sex" type="radio" value="" checked="checked" /><input name="sex" type="radio" value="" /><br />
					
					<!--多选框-->
					<input name="interest" type="checkbox" checked="checked"/>运动
					<input name="interest" type="checkbox" />聊天
					<input  name="interest" type="checkbox" />玩游戏
					<br />
					<!-- 下拉框-->
					<select name"city" size="1">
						<option value="1" selected="selected">广州 </option>
						<option value="2" >上海 </option>
						<option value="3" >深圳 </option>
						<option value="4" >北京 </option>
					</select>
					<br />
					<hr />
					<!-- 文本框-->
					<textarea name="showText" cols="5" rows="5">个人介绍</textarea>
					<br />
					
					<!--按钮-->
					<input type="submit" value="提交" />
					<input type="reset" value="重置" />
					<!--隐藏、只读 、禁用-->
					<input type="button" value="禁用" disabled="disabled" />
					<input name="read" type="text" value="Hello Word" readonly="readonly" />
					<input type="hidden" value="Hello Word" />
			<!--</fieldset>-->
		</form>
	</body>
</html>

效果图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值