HTML5 成长之路（四）表单、表单域与表单控件

最新推荐文章于 2023-02-08 11:19:48 发布

koko_TT

最新推荐文章于 2023-02-08 11:19:48 发布

阅读量375

点赞数

分类专栏： HTML5成长之路文章标签： HTML5表单 HTML5表单控件 HTML5表单域

本文链接：https://blog.csdn.net/weixin_44344462/article/details/89536203

版权

HTML5成长之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Show me the code

将代码保存为.html格式结尾的文件并用浏览器查看结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单、表单域、表单控件</title>

	<style>
		caption {
			font-size: 30px;
			color: blue;
		}
	</style>
</head>
<body>
	<h1>表单、表单域、表单控件</h1>
	<!-- 
		form标签的action属性是提交给哪个文件或者地址
		method属性可以选择：get，即url后?xxxx&xxxx的形式
						  post,即匿名提交
	 -->
	<form action="">
		<table align="center" cellpadding="10" border="1">
			<caption>input标签输入控件，不同属性type</caption>
			<thead>
				<tr>
					<td>说明</td>
					<td>对应input控件</td>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>type="text"</td>
					<td><input type="text"></td>
				</tr>

				<tr>
					<td>type="password"</td>
					<td><input type="password"></td>
				</tr>

				<tr>
					<td>type="radio",name="num"</td>
					<td>
						1 <input type="radio" name="num">
						2 <input type="radio" name="num">
					</td>
				</tr>

				<tr>
					<td>checked属性的单选默认</td>
					<td>
						默认被选中 <input type="radio" name="num1" checked="checked">
						默认没有被选中 <input type="radio" name="num1">
					</td>
				</tr>

				<tr>
					<td>type="button", value="按钮"</td>
					<td><input type="button" value="按钮"></td>
				</tr>

				<tr>
					<td>type="submit", value="提交"</td>
					<td><input type="submit" value="提交"></td>
				</tr>

				<tr>
					<td>type="reset", value="重置"</td>
					<td><input type="reset" value="重置"></td>
				</tr>

				<tr>
					<td><label for="thisText">label标签，for属性，type="text"的效果</label></td>
					<td><input type="text" id="thisText"></td>
				</tr>
				
				<tr>
					<td>select标签内含option标签的选择菜单</td>
					<td>
						<select name="" id="">
							<option value="">第一个值</option>
							<option value="">第二个值</option>
							<option value="">第三个值</option>
						</select>
					</td>
				</tr>

				<tr>
					<td>textarea标签</td>
					<td><textarea name="" id="" cols="30" rows="10"></textarea></td>	
				</tr>

				<tr>
					<td>type="file"</td>
					<td><input type="file"></td>	
				</tr>

				<tr>
					<td>type="image"</td>
					<td><input type="image" src="https://www.baidu.com/img/bd_logo1.png" alt="图像拉取失败" title="百度logo" width="100"></td>
				</tr>

			</tbody>
		</table>
	</form>
</body>
</html>

koko_TT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 成长之路（四）表单、表单域与表单控件

Show me the code将代码保存为.html格式结尾的文件并用浏览器查看结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单、表单域、表单控件</title> <style> caption {...
复制链接

扫一扫