HTML5 表单元素 —— input元素

2024-04-27 15:05:20

字体：大中小

来源：转载

供稿：网友

<!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>

这里写图片描述