网页设计：表单

最新推荐文章于 2025-08-18 11:27:38 发布

原创最新推荐文章于 2025-08-18 11:27:38 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#网页设计

前端专栏收录该内容

5 篇文章

订阅专栏

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

表单的使用

基本的表单语法

表单的元素格式

在这里插入图片描述

文本框

单选按钮

复选框

列表框#### 按钮

多文本

隐藏域、只读、禁用

代码测试：

<!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>

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