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属性—全部值

顺序属性值用途
1button按钮
2checkbox复选框
3color颜色选择器
4date(日历)包括年、月、日,不包括时间
5datetime-localdate 和 time 控件(包括年、月、日、时、分,不带时区)
6email用于 e-mail 地址的字段
7file文件选择字段和 “浏览…” 按钮,供文件上传
8hidden隐藏输入字段
9image图像作为提交按钮
10month年和月控件(不带时区)
11number用于输入数字的字段
12password密码字段
13radio单选按钮。(name必须一样)
14range精确值不重要的输入数字的控件(拖动条)
15reset重置所有的表单值为初始值
16search输入搜索字符串的文本字段
17submit提交按钮
18tel用于输入电话号码的字段
19text定义一个单行的文本字段(默认)
20time用于输入时间的控件(不带时区)
21url用于输入 URL 的字段
22week年和周控件(不带时区)
<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值