HTML5元素-定制input元素

HTML5元素-定制input元素

<!-- 用input元素输入文字 -->
<input type = "text"> </input> <!-- 不写type时,默认是text -->

<!--text型属性-->
<!-- maxlength = "" 最大可输入字符数 -->
<!-- size = "" 宽度足以显示字符数 -->
<!-- value = "" 设初始值 -->
<!-- placeholder 设提示文字 -->

<!-- 使用数据列表 -->
<form>
	<input list = "datalist"></input>
</form>

<datalist>
	<option value = "" label = "说明文字"/>
</datalist>
<!-- 对于text型input元素,datalist元素提供的值以自动补全建议值的方式呈现 -->


<!-- 生成只读或被禁用的文本框 -->
<input readonly/>		<!-- 不改变外观,谨慎使用 -->
<input disabled/>		<!-- 变灰 -->

<input dirname = ""/>		<!-- 指定文字方向数据的名称,暂时还没主流浏览器支持 -->


<!-- 用input元素输入密码 -->
<input type = "password" placeholder = "提示文字"/>

<!-- 用input元素生成按钮 -->
<input type = "reset" value = "说明"/>
<input type = "button" value = "说明"/>
<input type = "submit" value = "说明"/> 
<!-- submit型可用属性,与button元素类似-->
<!-- formaction -->
<!-- formenctype -->
<!-- formmethod -->
<!-- formtarget -->
<!-- formnovalidate -->

<!-- 用input元素为输入数据把关 -->
<input type = "number"/> <!-- 只接受数值 -->
<!--属性有: list ="datalist", min, max, readonly, required(必须输入), step, value -->

<input type = "range"/> <!-- 指定范围内一个数值 -->
<!-- 属性与number型相同 -->

<input type = "checkbox"/> <!-- 复选框 -->
<!--属性有: checked, required(必须选), value(提交的数据值,默认为on) -->

<fieldset>
<legend>区域说明</legend>
<input type = "radio" name = "同名互斥"/>
<input type = "radio" name = "同名互斥"/>
<input type = "radio" name = "同名互斥"/>
</fieldset>
<!-- 属性有: checked, required, value -->


<!-- 用input元素获取规定格式字符串 -->
<!-- 提交时检查 -->
<input type = "email"/>
<input type = "tel"/>
<input type = "url"/>
<!-- 属性: list = "datalist", maxlength, pattern, placeholder, readonly, size, value -->
<!-- email型还支持 mutiple属性,接受多个电子邮箱地址 -->


<!-- 用input元素获取时间和日期 -->
<input type = "datetime"/>
<input type = "datetime-local"/>
<input type = "date"/>
<input type = "month"/>
<input type = "time"/>
<input type = "week"/>
<!-- 属性: list = "datalist" min, max, readonly, required, step, value -->

<!--用input属性获取颜色值 -->
<input type = "color"/>

<!-- 用input元素获取搜索用词 -->
<input type = "search"/>

<!-- 用input元素生成隐藏数据项 -->
<input type = "hidden" name = "" value = ""/>

<!-- 用input元素生成图像按钮和分区响应图 -->
<!-- 点击图片会提交表单,发送的数据中包括 图片点击处的坐标 -->
<input type = "img" src = ""/>
<!--属性: -->
<!--	alt 图像不显示时的文字说明 -->
<!--	formaction -->
<!--	formenctype -->
<!--	formmethod -->
<!--	formtarget -->
<!--	formnovalidate -->
<!--	height -->
<!--	src -->
<!--	width -->


<!-- 用input元素上传文件 -->
<form enctype = "multipart/form-data">
	<input type = "file" name = ""/>
</form>
<!-- 属性: -->
<!--	accept 指定接受的MIME码 -->
<!--	multiple 一次上传多个文件 -->
<!--	required	-->

<!-- 表单编码类型为 multipart/form-data 才能上传文件 -->