input标签的属性归纳html/html5

最新推荐文章于 2024-08-03 10:06:27 发布

iuukai

最新推荐文章于 2024-08-03 10:06:27 发布

阅读量844

点赞数

分类专栏：标签及属性 html+css入门学习过程

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104379842

版权

html+css入门学习过程同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

标签及属性

6 篇文章 0 订阅

订阅专栏

**<input>在 HTML 中适用的属性和值**
属性	值	描述
accept	`audio/`、`video/`、`image/*`、`MIME_type`	规定通过文件上传来提交的文件的类型。 (只针对type="file")
~~align~~	~~left、right、top、middle、bottom~~	~~HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")~~
alt	`text`	定义图像输入的替代文本。 (只针对type="image")
checked	`checked`	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	`disabled`	disabled 属性规定应该禁用的 <input> 元素。
maxlength	`number`	属性规定 <input> 元素中允许的最大字符数。
name	`text`	name 属性规定 <input> 元素的名称。
readonly	`readonly`	readonly 属性规定输入字段是只读的。
size	`number`	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	`URL`	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
value	`text`	指定 <input> 元素 value 的值。
type	`button`、`checkbox`、`color` 、`date`、`datetime`、 `datetime-local`、`email`、`file`、`hidden`、`image`、 `month`、`number`、`password`、`radio`、`range`、`reset`、 `search`、`submit`、`tel`、`text`、`time`、`url`、`week`	type 属性规定要显示的 <input> 元素的类型。

**<input>在 HTML5 中新增的属性和值**
属性	值	描述
autocomplete	`on`、`off`	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocus	`autofocus`	属性规定当页面加载时 <input> 元素应该自动获得焦点。
form	`form_id`	form 属性规定 <input> 元素所属的一个或多个表单。
formaction	`URL`	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctype	`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethod	`get`、`post`	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidate	`formnovalidate`	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtarget	`_blank`、`_self`、`_parent`、`_top framename`	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
height	`pixels`	规定 <input>元素的高度。(只针对type="image")
list	`datalist_id`	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
max	`number`、`date`	属性规定 <input> 元素的最大值。
min	`number`、`date`	属性规定 <input> 元素的最小值。
multiple	`multiple`	属性规定允许用户输入到 <input> 元素的多个值。
pattern	`regexp`	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholder	`text`	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
required	`required`	属性规定必需在提交表单之前填写输入字段。
step	`number`	step 属性规定 <input> 元素的合法数字间隔。
width	`pixels`	width 属性规定 <input> 元素的宽度。 (只针对type="image")

常用input类型[type]

注意：

区分[type=“button”]和[type=“submit”]：button默认时，不会提交数据或者任何数据，就一个存粹的按钮。submit则会提交整个表单的数据到后台。
语义化：<form> 里用的文本标签是<label> ，而不是<p>/<a>。
👉传送门：input type=“submit” 和"button"有什么区别
CSS渲染input元素，用属性选择器标签[属性=值]，因为input没有class，id有些可以不设，所以属性选择器就方便许多。可以为：
input[type=text]（选取属性类型为text的input标签）；
input[id=name]（选取属性id为text的input标签）；
input[value=1]（选取属性value为1的input标签）；
<label for=id>与<input id="">配合工作。
👉传送门：浅谈与合作的两种方式
区分id属性和name属性：①表单数据以name提交，而css渲染、js获取对象则是id；②id要符合标识的要求，比如大小写敏感，最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求，甚至可以用数字。
👉传送门：input中name和id的区别

ps：

①当然，如果有id，也可以id选择器： #id；

②属性选择器内的值，可以加单/双引号，如： input[type="text"]。

③虽然 <button></button>和 <input type="button">是同一种功能，但：
a、 <button></button>有结束标签， <input type="button">是空标签；
b、 <input type="button">里面想要添加文本内容只能在value设置，而 <button></button>，因为有起始和结束标签，所以能插入其它元素。
怎么用看场景和个人喜欢了。

在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	min-width: 100%;
	min-height: 100%;
	background: #fcc;
	position: absolute;
}

.container {
	width: 1070px;
	margin: 0 auto;
}

/*index.css*/
.header {
	height: 200px;
}

.main {
	background: rgba(255, 255, 255, 0.4);
}

.footer {
	height: 100px;
}

#user-name {			/* id 选择器；id要符合标识的要求，比如大小写敏感，最好不要包含下划线*/
	background: rgba( 0, 0, 0, 0.2);
}

input[id=user-password] {		/*属性选择器；id要符合标识的要求，比如大小写敏感，最好不要包含下划线*/
	background: rgba( 0, 0, 155, 0.2);
}

input[name=btn] {			/*属性选择器*/
	width: 100px;
	height: 30px;
	font-size: 20px;
	border-radius: 25px;
}

input[value=提交] {			/*属性选择器，当value为中文符号时，建议选其他属性，而不是带有中文符号的属性*/
	padding: 0 20px 2px;
	font-size: 15px;
	color: #fff;
	background: rgba(155, 0, 200, 0.2);
}

input[type=reset] {			/*属性选择器*/
	width: 80px;
	height: 30px;
	font-size: 18px;
	line-height: 18px;
	color: #fff;
	background: rgba(0, 0, 0, 1);
}

textarea[name=comments] {		/*属性选择器*/
	width: 200px;
	height: 50px;
	font-size: 20px;
	color: #fff;
	padding: 5px;
  	border: 2px solid #ccc;
  	background-color: rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header container"></div>
		<div class="main container">
			<div class="wrap">
				<form>
					<label for="user-name">【type="text"】姓名：</label>
					<input type="text" id="user-name" name="user_name" /><!--注意id和name-->
					<br />
					<label for="user-password">【type="password"】密码：</label>
					<input type="password" id="user-password" name="user_password" /><!--注意id和name-->
					<br />
					<label for="btn">【type="button"】点击按钮：</label>
					<input type="button" id="btn" name="btn" value="按钮"  />
					<br />
					<label for="sbt">【type="submit"】提交按钮：</label>
					<input type="submit" id="sbt" name="sbt" value="提交" />
					<br />
					<label for="rst">【type="reset"】重置按钮：</label>
					<input type="reset" id="rst" name="rst" value="重置" />
					<br />
					<label for="gender">【type="radio"】性别：</label>
					<input type="radio" id="gender" name="gender" value="female" />女
					<input type="radio" id="gender" name="gender" value="male" />男
					<br />
					<label for="hobby">【type="checkbox"】爱好：</label>
					<input type="checkbox" name="hobby[]" value="A" />A
					<input type="checkbox" name="hobby[]" value="B" />B
					<input type="checkbox" name="hobby[]" value="C" />C
					<br />
					<label for="up-img">【type="file"】上传文件：</label>
					<input type="file" id="up-img" name="up-img">
					<br />
					<label for="week">【select+option】星期</label>
					<select id="week" name="week">
						<option value="1">一</option>
						<option value="2">二</option>
						<option value="3">三</option>
						<option value="4">四</option>
						<option value="5">五</option>
						<option value="6">六</option>
						<option value="7">七</option>
					</select>
					<br />
					<label for="text-area">文本域：</label>
					<textarea id="text-area" name="text-area" cols="20" rows="4">请输入内容...</textarea>
					<br />
					<label for="comments">评论：</label>
					<textarea id="comments" name="comments">请输入内容...</textarea>
				</form>
			</div>
		</div>
		<div class="footer container"></div>
	</div>
</body>
</html>