HTML5 表单基础

是光の谢宣骞

已于 2022-04-03 14:12:39 修改

阅读量120

点赞数

分类专栏：其他学习文章标签： html5

于 2020-12-22 20:30:48 首次发布

本文链接：https://blog.csdn.net/qq_45870740/article/details/111566129

版权

其他学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

话不多说，直接上代码，所有的知识点均在注释里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!-- target:将提交表单反馈的信息显示在哪里，有如下几个值：
		/top/<frame>/_self/_blank/_parent -->
		 <!-- post和get区别很重要，各位读者自行去网上查找 -->
		<!-- 如果不设置form的action属性，浏览器会将表单数据发到用以加载该HTML文档的URL
			Node.js只响应post请求
			form表单的name属性值不会发送给服务器，但input如果没有name属性，则输入的数据不会提交给服务器
		 -->
		<!-- autocomplete的用法 -->
		<!-- 值为on/off,默认为on -->
		<form target="_blank" method="post" autocomplete="on" action="表单target.html">
			<input name="name" />
			<input name="age" />
			<button type="submit">提交</button>
		</form>
		<!-- fieldset的用法 -->
		<!-- 在复杂的表单中，将元素组织起来 -->
		<form id="form1">
			<fieldset>
				<!-- legend必须为第一子元素 -->
				<!-- legend作为说明标签 -->
				<legend>基本信息</legend>
				<!-- 添加标签时lable的for属性值为input的name值 -->
				<!-- 自动聚焦到输入框，当有多个autofocus时，默认为最后一个 -->
				<!-- 设置disbled属性值为不可更改 -->
				<!-- 将input放在lable中间，会形成一行 -->
				<p><lable for="name">姓名:<input name="name" autofocus="autofocus"/></lable> </p>
				
				<p><lable for="age">年龄:<input name="age" disabled="disabled"/></lable> </p>
				
			</fieldset>
			<!-- disabled禁用整组input标签 -->
			<fieldset disabled>
				<p><lable for="address">地址:<input name="address" /></lable> </p>
				
				<p><lable for="aihao">爱好:<input name="aihao" /></lable> </p>
				
			</fieldset>
			<fieldset>
				<!-- 当form没有定义相关属性时，可在button定义 -->
				<!-- formaction/formmethod/formtarget -->
				<button type="submit" formmethod="post"></button>
				<!-- 定义普通按钮 -->
				<!-- 定义type为button -->
				<button type="button"></button>
			</fieldset>
			
		</form>
		<!-- 在form外的input元素可定义form属性，值为form的id值，不用加#,即可让input元素成为form的一部分 -->
		<input form="form1" name="value"/>
	</body>
</html>