<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf8">
<style>
body {
font-size: 14px;
}
ol {
margin: 0;
margin-bottom: 10px;
}
table {
margin-bottom: 10px;
border-spacing: 0px;
border: 1px solid black;
}
table td, table th {
padding: 5px;
border: 1px solid black;
}
label {
display: block;
}
.container {
border: 1px groove black;
padding: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div>input element type</div>
<ol>
<li>list</li>
<li>text</li>
<li>password</li>
<li>radio</li>
<li>checkbox</li>
<li>button</li>
<li>submit</li>
<li>reset</li>
<li>number</li>
<li>color</li>
<li>range</li>
<li>date</li>
<li>month</li>
<li>week</li>
<li>time</li>
<li>datetime</li>
<li>datetime-local</li>
<li>email</li>
<li>search</li>
<li>tel</li>
<li>url</li>
<li>hidden</li>
<li>image</li>
<li>file</li>
</ol>
<table>
<tr>
<th>input param</th>
<th>description</th>
</tr>
<tr>
<td>autocomplete</td>
<td>规定表单或输入字段是否应该自动完成,取值为on或off.如果是on,浏览器会自动填写值.</td>
</tr>
<tr>
<td>autofocus</td>
<td>规定页面加载时,元素是否自动获得焦点(autofocus属性不需要值)</td>
</tr>
<tr>
<td>disabled</td>
<td>规定输入字段是禁用的.被禁用的元素是不可用和不可点击的.被禁用的元素不会被提交.(disabled属性不需要值.它等同于disabled="disabled")</td>
</tr>
<tr>
<td>maxlength</td>
<td>规定输入字段允许的最大长度(仅适用于email和file)</td>
</tr>
<tr>
<td>multiple</td>
<td>规定是否允许用户输入一个以上的元素(autofocus属性不需要值)</td>
</tr>
<tr>
<td>pattern</td>
<td>是一个正则表达式,提交时会自动校验输入值的合法性</td>
</tr>
<tr>
<td>placeholder</td>
<td>在输入值之前显示的文本</td>
</tr>
<tr>
<td>readonly</td>
<td>规定输入字段为只读(不能修改.readonly属性不需要值.它等同于readonly="readonly")</td>
</tr>
<tr>
<td>required</td>
<td>限制了输入的内容不能为空</td>
</tr>
<tr>
<td>size</td>
<td>规定输入字段的尺寸(以字符计)</td>
</tr>
<tr>
<td>step</td>
<td>步长,只有和初始值距离该步长的整数倍的值才是合法的,其它值虽然也可能被填入,但是不一定会校验通过</li></td>
</tr>
<tr>
<td>value</td>
<td>规定输入字段的初始值</td>
</tr>
<tr>
<td>height 和 width</td>
<td>规定元素的宽度和高度</td>
</tr>
<tr>
<td>min 和 max</td>
<td>规定元素的最小值和最大值</td>
</tr>
<tr>
<td>onchange</td>
<td>当输入框的值改变时,会触发该变量对应的函数</li></td>
</tr>
</table>
<div class="container">
<label>list</label>
<div>list属性引用<datalist>元素中包含的预定义选项.用户输入这些值时会有相应的提示.当然用户也可以输入其它值.</div>
<input list="mylist"/>
<datalist id="mylist">
<option value="chrome">
<option value="ie">
<option value="Edge">
<option value="firefox">
</datalist>
</div>
<div class="container">
<label>text</label>
<div>文本域,用户可以在文本域中写入文本</div>
<input type="text"/>
</div>
<div class="container">
<label>password</label>
<div>密码字段,密码字段中的字符显示为圆点</div>
<input type="password" placeHolder="请输入密码" maxlength="6" id="pwdInput" />
</div>
<div class="container">
<label>radio</label>
<div>复选框,默认无文本.根据name属性分组.</div>
<input type="radio" name="group" value="1"/>
<input type="radio" name="group" value="2"/>
</div>
<div class="container">
<label>checkbox</label>
<div>复选框,默认无文本</div>
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
</div>
<div class="container">
<label>button</label>
<div>按钮,默认无文本</div>
<input type="button"/>
</div>
<div class="container">
<label>submit</label>
<div>提交按钮,默认的文本是"提交".会使用form的method方法将数据发送到action的地址上.</div>
<input type="submit"/>
</div>
<div class="container">
<label>reset</label>
<div>重置按钮,默认的文本是"重置".会将form表单的所有数据重置为html中元素的value值.</div>
<input type="reset"/>
</div>
<div class="container">
<label>number</label>
<div>数字框.只能输入整数或小数.右侧有上下的三角按钮,步长默认为1</div>
<input type="number"/>
</div>
<div class="container">
<label>color</label>
<div>颜色选择域.</div>
<input type="color"/>
</div>
<div class="container">
<label>range</label>
<div>滑动条.</div>
<input type="range" min="0" max="100" step="1" value="0"/>
</div>
<div class="container">
<label>date</label>
<div>日期选择框.可以选择"年月日"."叉按钮"用来重置数据.上下的三角按钮用来对"年或月或日"进行加减.最右侧的大三角可以弹出选择框.</div>
<form>
<input type="date" step="5"/>
<input type="submit"/>
</form>
</div>
<div class="container">
<label>month</label>
<div>年月选择框.可以选择"年月"."叉按钮"用来重置数据.上下的三角按钮用来对"年或月"进行加减.最右侧的大三角可以弹出选择框.</div>
<input type="month"/>
</div>
<div class="container">
<label>week</label>
<div>年周选择框.可以选择"年/第几周"."叉按钮"用来删除数据.上下的三角按钮用来对"年或周"进行加减.最右侧的大三角可以弹出选择框.</div>
<input type="week"/>
</div>
<div class="container">
<label>time</label>
<div>时间选择框.可以选择"上/下午"、几时几分."叉按钮"用来删除数据.上下的三角按钮用来对"上/下午"、"小时或分钟"进行加减.</div>
<input type="time"/>
</div>
<div class="container">
<label>datetime</label>
<div>日期时间框.奇怪的是:无数据校验功能!!!</div>
<form>
<input type="datetime"/>
<input type="submit"/>
</form>
</div>
<div class="container">
<label>datetime-local</label>
<div>本地日期时间框.可以选择"年月日,上/下午 时分"."叉按钮"用来重置数据.上下的三角按钮用来对"年月日,上/下午时分"进行加减.最右侧的大三角可以弹出选择框.</div>
<input type="datetime-local"/>
</div>
<div class="container">
<label>email</label>
<div>邮件域.如果输入错误,submit时会提示"请在电子邮件地址中包括@"(空是合法的).</div>
<form>
<input type="email"/>
<input type="submit"/>
</form>
</div>
<div class="container">
<label>search</label>
<div>搜索框.右侧"叉按钮"用来清空数据.</div>
<input type="search" pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"/>
</div>
<div class="container">
<label>tel</label>
<div>电话号码框.required说明了输入的内容不能为空,否则提交会提示"请填写此字段";由于不会自动校验,将正则表达式赋予pattern属性,可以让其提交时自动校验.</div>
<form>
<input type="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"/>
<input type="submit"/>
</form>
</div>
<div class="container">
<label>url</label>
<div>网址域.如果输入错误,submit时会提示"请输入网址"(空是合法的)</div>
<form>
<input type="url"/>
<input type="submit"/>
</form>
</div>
<div class="container">
<label>hidden</label>
<div>隐藏的输入域.如果要提交并非用户直接输入的数据的话,就是用这种类型的元素.</div>
<input type="hidden"/>
</div>
<div class="container">
<label>image</label>
<div>图片提交按钮,如果图片加载失败,会显示破图和"提交"文字.H5新增的类型,用户单击了这个图片后会提交表单.</div>
<input type="image" width="50px" height="50px" src="file:///C:/Users/admin/Desktop/test.jpg"/>
</div>
<div class="container">
<label>file</label>
<div>文件选择域.包含一个"选择文件"的按钮和一个用来显示文件名的文本域,value为文件的具体路径.</div>
<input type="file" id="file"/>
<button onclick="showFile()">显示</button>
</div>
<script>
var file = document.getElementById("file");
function showFile() {
alert(file.value);
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
