HTML高级标签之表单应用(一)

最新推荐文章于 2024-05-14 11:24:43 发布

怅然入梦

最新推荐文章于 2024-05-14 11:24:43 发布

阅读量1.4k

点赞数

分类专栏： HTML5开发学习 HTML基础文章标签： html web app

本文链接：https://blog.csdn.net/anig2014/article/details/44852779

版权

HTML5开发学习同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML基础

12 篇文章 2 订阅

订阅专栏

表单应用包括登录表单, 单选框, 复选框, 下拉列表, 普通列表, 多选列表, 多行文本域

本章主要学习的是登录表单,单选框和复选框

代码示例:

<!DOCTYPE html>
<html>
<head>
<title>表单应用</title>

<meta charset="utf-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>


<body>
	<table border="1" width="500" align="center">
		<form name="frm" action="login.php"> <!-- <form></form>标签用来创建表单. action属性: 设置接收和处理浏览器递交的标点内容的服务器就程序的URL -->
<a href="Main.html">返回主页</a> <a href="FormApplication2.html">表单的应用(二)</a>
			<caption><h1>表单的应用</h1></caption>

	<!-- 登录表单 -->
			<tr>
				<th>文本域(<u>U</u>)
				</th>
				<td><input type="text" name="username" value="username">
				</td>
			</tr>

			<tr>
				<th>密码域</th>
				<td><input type="text" name="password" value="password">
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<span style="white-space: pre">      </span><br>
				<input type="submit" name="sub">
				<span style="white-space: pre">          </span>
				<input type="reset"><br>
				<span style="white-space: pre"> </span>
				</td>
			</tr>
			
		<!-- 复选框表单 -->	
			<tr>
				<th>复选框</th>
				<td>
					运动<input type="checkbox">
					看书<input type="checkbox">
					听歌<input type="checkbox">
					吃饭<input type="checkbox">
				</td>
			</tr>
			
		<!-- 单选框表单 -->	
			<tr>
				<th>单选框</th>
				<td>
					<input type="radio" name="sex">男
					<input type="radio" name="sex">女
				</td>
			</tr>
		</form>
	</table>
</body>
</html>

运行结果: