HTML表单

最新推荐文章于 2025-02-09 22:23:03 发布

purple_lumpy

最新推荐文章于 2025-02-09 22:23:03 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏：前端之HTML CSS 文章标签： html 表单

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/78943052

前端之HTML CSS 专栏收录该内容

14 篇文章

订阅专栏

表单

语法：

<form>

表单元素

</form>

其中，表单元素，可以是：文本域.、单选框、复选框、按钮、列表。

表单本身不可见，网页上显示出来的是表单元素。

示例：

<!DOCTYPE html>
<html>
<head>
	<title>基础表单</title>
	<meta charset="utf-8">
</head>
<body>
	<form>
		姓名：<input type="text" name="username">
		密码：<input type="password" name="paw">
		<input type="submit">
	</form>

</body>
</html>

示例：

<!DOCTYPE html>
<html>
<head>
	<title>表单元素</title>
	<meta charset="utf-8">
</head>
<body>

	<h1 align="center">注册信息</h1>
	<hr color="#000000">

	<form>
		<table width="600px" align="center" bgcolor="#f2f2f2">
			
			<tr >
				<td>姓名：</td>
				<td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"></td>
			</tr>

			<tr >
				<td>邮箱：</td>
				<td><input type="text" name="email" size="25" value="@163.com" ></td>
			</tr>

			<tr >
				<td>密码：</td>
				<td><input type="password" name="pwd" size="25"></td>
			</tr>

			<tr >
				<td>确认密码：</td>
				<td><input type="password" name="pwd" size="25"></td>
			</tr>

			<tr >
				<td>上传照片</td>
				<td><input type="file" name="userimg"></td>
			</tr>

			<tr >
				<td>性别：</td>
				<td>男<input type="radio" name="gender" value="man">
					女<input type="radio" name="gender" value="woman">
					保密<input type="radio" name="gender" value="bm" checked>
				</td>
			</tr>

			<tr >
				<td>爱好：</td>
				<td>读书<input type="checkbox" name="dx1" value="read" checked>
					跳舞<input type="checkbox" name="dx1" value="dance">
					唱歌<input type="checkbox" name="dx1" value="sing">
				</td>
			</tr>

			<tr >
				<td><input type="button" name="button" value="点我">
					<input type="submit" name="submit">
					<input type="reset" name="reset"></td>
					<input type="image" name="image_button" src="img">
					<input type="hidden" name="hidden" value="这是一个用户注册信息">
				<td></td>
			</tr>
		</table>
	</form>
</body>
</html>

	<table>
		<tr>
			<td>城市：</td>
			<td><!--下拉菜单-->
				<select name="city">
				<option value=“default”>--请选择--</option>
				<option value="bj" selected>北京</option><!--默认选中-->
				<option value="sh">上海</option>
				<option value="tj">天津</option>
				<option value="cq">重庆</option>
				</select>
			</td>
			<td><!--列表项-->
				<select name="city" size="2" multiple>
				<option value="bj">北京</option>
				<option value="sh">上海</option>
				<option value="tj">天津</option>
				<option value="cq">重庆</option>
				</select>
			</td>
		</tr>
	</table>

<body>
	<table>
		<tr>
			<td>城市：</td>
			<td><!--下拉菜单-->
				<select name="city">
				<option value=“default”>--请选择--</option>
				<optgroup label="北">
				<option value="bj" selected>北京</option><!--默认选中-->
				<option value="sh">上海</option>
				<option value="tj">天津</option>
				</optgroup>
				<optgroup label="南">
				<option value="cq">重庆</option>
				<option value="sh">上海</option>
				<option value="tj">天津</option>
				<option value="cq">重庆</option>
				<option value="sh">上海</option>
				<option value="tj">天津</option>
				<option value="cq">重庆</option>
				</optgroup>
				</select>
			</td>
			<td><!--列表项-->
				<select name="city" size="2" multiple>
				<option value="bj">北京</option>
				<option value="sh">上海</option>
				<option value="tj">天津</option>
				<option value="cq">重庆</option>
				</select>
			</td>
		</tr>
	</table>

			<td>简介</td>
			<td>
				<textarea name="intro" rows="6" cols="50" placeholder="请输入个人介绍"></textarea>
			</td>