input 属性及值,input全部属性及值,属性、值,全部属性,form表单

input 属性及值,input全部属性及值,属性、值,全部属性,form表单

示例

1.accept属性—可指定文件类型

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			accept属性 可指定文件类型如果不限可写成
			accept="image/*" 或 accept="*",
			只能和 type="file" 配合使用。
		-->
		accept属性<input type="file" accept="image/gif,image/jpeg"/>
	</p>
</form>

2.align属性—它规定图像的对齐方式

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			align属性 它规定图像的对齐方式。
			right 右对齐对象 和 left 左对齐图像(默认)所有浏览器都支持,
			top 上对齐图像,
			middle 居中对齐图像,
			bottom 下对齐图像,
			只能与  type="image" 配合使用。
		-->
		 align属性<input type="image" src="img/未标题-1-恢复的.jpg" align="left" width="50px"/>
	</p>
</form>

3.alt属性—当图片不幸丢失后显示的文字

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			alt属性 当图片不幸丢失后显示的文字。
		-->
		 alt属性<input type="image" src="img/未-恢复的.jpg" alt="Submit"/>
	</p>
</form>

4.autocomplete属性—是否让浏览器自动记录之前输入的值

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			autocomplete属性 是否让浏览器自动记录之前输入的值。
			默认为on(记录),
			为了对客户的资料进行保密,防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete="off" 来关闭记录。
		-->
		autocomplete属性<input type="email" autocomplete="off" />
	</p>
</form>

5.autofocus属性—在页面加载时获取焦点

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			autofocus属性 在页面加载时获取焦点(一个页面只能出现一次 不适用于 type="hidden")。
		-->
		autofocus属性<input type="datetime" autofocus="autofocus" />
	</p>
</form>

6.checkbox属性—在页面加载时应该被预先被选中的单选框或复选框


<form action="index.html" method="post" id="f1">
	<p>
		<!--
			checkbox属性 在页面加载时应该被预先被选中的单选框或复选框。
			注:单选框只能出现一次,若每个单选框都加上此属性则以最后一个为准。
			与 type="checkbox" 或 type="radio" 配合使用。
		-->
		checkbox属性<input type="checkbox" />a&nbsp;<input type="checkbox" checked="checked" />b&nbsp;<input type="checkbox" />c
		<input type="checkbox" checked="checked" />d&nbsp;<input type="radio" name="a" id="a" value="" checked="checked" /><input type="radio" name="a" id="a" value="" checked="checked" /></p>
</form>

7.disabled属性—禁用该input元素

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			disabled属性 禁用该input元素,
			无法与 type="hidden" 一起使用。
			注:当禁用该input元素时此元素的autofocus属性将会失效其他元素要是有autofocus属性将会生效,
			此元素的checked属性不会失效。
		-->
		disabled属性<input type="text" disabled="disabled" />
	</p>
</form>

8.form属性—规定该元素所属哪个表单

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			form属性 规定该元素所属哪个表单(一个或多个使用空格分隔),
			form的值为表单的id,该元素可以写在form之外。
		-->
		form属性<input type="text" form="f1" />
	</p>
</form>

9.formaction属性—覆盖form元素的action属性

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			formaction属性 覆盖form元素的action属性,
			一个form元素中可以出现多个该属性分别提交向不同的地方,
			该属性适用于 type="submit" 或 type="image"。
			如果没有该属性还是会按照form元素的action属性进行提交
		-->
		formaction属性<input type="submit" formaction="demo_admin.asp" value="formaction属性" />
	</p>
</form>

10.formenctype属性—覆盖form元素的enctype属性

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			formenctype属性 覆盖form元素的enctype属性,该属性与 type="submit" 或 type="image" 配合使用。
			值: ①、application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认)。
				②、multipart/form-data 不对字符编码。当使用有文件上传控件的表单时,该值是必需的。
				③、text/plain 将空格转换为 "+" 符号,但不编码特殊字符。
				注:①和③都不能用 于上传文件,只有multipart/form-data才能完整的传递文件数据。
				form的enctype属性默认为①
		-->
		formenctype属性<input type="submit" formenctype="multipart/form-data" value="Submit" />
	</p>
</form>

11.formmethod属性—覆盖form元素的method属性

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			formmethod属性 覆盖form元素的method属性。该属性与type="submit" 或 type="image"配合使用。
			值: get 向 URL 追加表单数据(form-data):URL?name=value&name=value
				post 以 HTTP post 事务的形式发送表单数据(form-data)
		-->
		formmethod属性<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
	</p>
</form>

12.formnovalidate属性—覆盖form元素的novalidate属性

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			formnovalidate属性 覆盖form元素的novalidate属性。
			如果使用该属性,则提交表单时按钮不会执行验证过程。
		-->
		formnovalidate属性<input type="submit" formnovalidate="formnovalidate" value="Submit" />
	</p>
</form>

13.formtarget属性—覆盖form元素的target属性

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			formtarget属性 覆盖form元素的target属性。该属性与 type="submit" 以及 type="image" 配合使用。
			_blank 在新窗口/选项卡中将表单提交到文档。
			_self 在同一框架中将表单提交到文档。(默认)
			_parent 在父框架中将表单提交到文档。
			_top 在整个窗口中将表单提交到文档。
			framename 在指定的框架中将表单提交到文档。
		-->
		formtarget属性<input type="submit" formtarget="_blank" value="Submit" />
	</p>
</form>

14.height属性—规定图片的高度

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			height属性 只适用于type="image",它规定图片的高度。
			单位为px(默认)或%
		-->
		height属性<input type="image" src="img/未标题-1-恢复的.jpg" alt="Submit" height="128"/>
	</p>
</form>

15.list属性—引用数据列表包含输入字段的预定义选项

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			list属性 引用数据列表,其中包含输入字段的预定义选项。
			值为文档中的 datalist 的 id。
		-->
		list属性
		<input type="text" list="url_list" />
		<datalist id="url_list">
			<option label="W3Schools" value="http://www.w3schools.com" />
			<option label="Google" value="http://www.google.com" />
			<option label="Microsoft" value="http://www.microsoft.com" />
		</datalist>
	</p>
</form>

16.max属性—规定输入字段所允许的最大值

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			max属性 规定输入字段所允许的最大值。max属性最好与min属性配合使用。
			max = "10"输入的值必须小于或等于10(type="number")
			max="2019-01-01"输入的日期必须小于或等于2019-01-01,格式必须为"yyyy-MM-dd"不可以缩写(type="date")
		-->
		max属性<input type="date" max="2019-01-01" />
	</p>
</form>

17.maxlength属性—规定输入字段的最大长度

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			maxlength属性 规定输入字段的最大长度,以字符个数计。
			与 type="text" 或 type="password" 配合使用。
		-->
		maxlength属性<input type="text" maxlength="10" />
	</p>
</form>

18.min属性—规定输入字段所允许的最小值

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			min属性 规定输入字段所允许的最小值。min属性最好与max属性配合使用。
			min = "10"输入的值必须大于或等于10(type="number")
			min="2019-01-01"输入的日期必须大于或等于2019-01-01,格式必须为"yyyy-MM-dd"不可以缩写(type="date")
		-->
		min属性<input type="number" min="10"/>
	</p>
</form>

19.multiple属性—可选择多个文件类型

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			multiple属性 可选择多个文件类型。
		-->
		multiple属性<input type="file" multiple="multiple" />
	</p>
</form>

20.name属性—规定input元素的名称

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			name属性 规定input元素的名称。(必选)
			注:只有设置了name属性的表单元素才能在提交表单时传递它们的值。
		-->
		name属性 <input type="text" name="email" />
	</p>
</form>

21.pattern属性—规定用于验证输入字段的模式(正则)

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			pattern属性 规定用于验证输入字段的模式(正则表达式)。
		-->
		pattern属性<input type="text" name="country_code" pattern="[A-z]{3}" />
	</p>
</form>

22.title属性—当鼠标悬浮到该元素上时显示的信息

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			title属性 当鼠标悬浮到该元素上时显示的信息
		-->
		 title属性<input type="text" title="提示" />
	</p>
</form>

23.placeholder属性—该元素在未输入内容前的提示

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			placeholder属性 该元素在未输入内容前的提示
			该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
		-->
		placeholder属性<input type="text" placeholder="请输入姓名" />
	</p>
</form>

24.readonly属性—规定该元素为只读

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			readonly属性 规定该元素为只读。不可更改值。
			readonly 属性可与 type="text" 或 type="password" 配合使用。
		-->
		readonly属性<input type="text" value="0000000" readonly="readonly" />
	</p>
</form>

25.required属性—规定该元素是必填(必选)的

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			required属性 规定该元素是必填(或必选)的。
		-->
		required属性<input type="text" required="required" />
	</p>
</form>

26.size 属性—该元素的可见输入宽度

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			size属性 规定该元素的可见输入宽度。
			对于 type="text"和  type="password"size 属性定义的是可见的字符数。
			而对于其他类型,size 属性定义的是以像素为单位的输入字段宽度。
		-->
		size属性<input type="text" size="35" />
	</p>
</form>

27.src属性—规定提交按钮显示的图像的URL

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			src属性 只能与 type="image"配合使用。
			它规定作为提交按钮显示的图像的 URL。
		-->
		src属性 <input type="image" src="submit.jpg" />
	</p>
</form>

28.step属性—只能填step值的整倍数

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			step属性 该元素只能填step值的整倍数(不分正负)
		-->
		step属性<input type="number" step="3" />
	</p>
</form>

29.value属性—该元素的初始值

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			value属性 该元素的初始值
		-->
		value属性<input type="text" value="Bush" />
	</p>
</form>

30.width属性—规定图片的宽度

<form action="index.html" method="post" id="f1">
	<p>
		<!--
			width 属性只适用于type="image",它规定图片的宽度。
			单位为px(默认)或%
		-->
		width属性<input type="image" src="img/未标题-1-恢复的.jpg" width="50%"/>
	</p>
</form>

31.type属性—全部值

顺序 属性值 用途
1 button 按钮
2 checkbox 复选框
3 color 颜色选择器
4 date (日历)包括年、月、日,不包括时间
5 datetime-local date 和 time 控件(包括年、月、日、时、分,不带时区)
6 email 用于 e-mail 地址的字段
7 file 文件选择字段和 “浏览…” 按钮,供文件上传
8 hidden 隐藏输入字段
9 image 图像作为提交按钮
10 month 年和月控件(不带时区)
11 number 用于输入数字的字段
12 password 密码字段
13 radio 单选按钮。(name必须一样)
14 range 精确值不重要的输入数字的控件(拖动条)
15 reset 重置所有的表单值为初始值
16 search 输入搜索字符串的文本字段
17 submit 提交按钮
18 tel 用于输入电话号码的字段
19 text 定义一个单行的文本字段(默认)
20 time 用于输入时间的控件(不带时区)
21 url 用于输入 URL 的字段
22 week 年和周控件(不带时区)
<form action="index.html" method="post" id="f1">
	<p>
		1.定义按钮<input type="button" /><br />
		2.定义复选框<input type="checkbox" /><br />
		3.定义颜色选择器<input type="color" /><br />
		4.定义(日历)包括年、月、日,不包括时间<input type="date" /><br />
		<!--
			!!不知道为什么datetime值目前还不太管用
			定义date和 time控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)<input type="datetime" /><br />
		-->
		5.定义 date 和 time 控件(包括年、月、日、时、分,不带时区)<input type="datetime-local" /><br />
		6.定义(日历)用于 e-mail 地址的字段<input type="email" /><br />
		7.定义文件选择字段和 "浏览..." 按钮,供文件上传<input type="file" /><br />
		8.定义隐藏输入字段<input type="hidden" /><br />
		9.定义图像作为提交按钮<input type="image" /><br />
		10.定义年和月控件(不带时区)<input type="month" /><br />
		11.定义用于输入数字的字段<input type="number" /><br />
		12.定义密码字段(字段中的字符会被遮蔽)<input type="password" /><br />
		13.定义单选按钮。(name必须一样)<input type="radio" /><br />
		14.定义用于精确值不重要的输入数字的控件(拖动条)<input type="range" /><br />
		15.定义重置按钮(重置所有的表单值为初始值)<input type="reset" /><br />
		16.定义用于输入搜索字符串的文本字段<input type="search" /><br />
		17.定义提交按钮<input type="submit" /><br />
		18.定义用于输入电话号码的字段<input type="tel" /><br />
		19.默认。定义一个单行的文本字段<input type="text" /><br />
		20.定义用于输入时间的控件(不带时区)<input type="time" /><br />
		21.定义用于输入 URL 的字段<input type="url" /><br />
		22.定义年和周控件(不带时区)<input type="week" />
	</p>
</form>
发布了43 篇原创文章 · 获赞 61 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43583693/article/details/102858975