常见的表单素有哪些？各有什么属性？ 这里是修真院前端小课堂，每篇分享文从【常见的表单素有哪些？各有什么属性？ 】大家好，我是IT修真院北京分院第23期学员。今天小课堂的主要内容是，input表单的应用，还有在html5中新增的属性。表单素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的素，最主要的作用就是收集信息。表单素是页面中不可缺少的素，在最新的H5中，表单素也新增了一些属性，在页面构建中发挥了重要的作用。一般来说，表单包含如下几个部分：1. 提示信息：表单中包含的说明性文字2. 表单控件：包含了具体的表单功能项3. 表单域：容纳所有表单控件和提示信息常用的表单素，包括：1. form: 定义供用户输入的表单。2. fieldset: 定义域。即输入区加有文字的边框。3. legend：定义域的标题，即边框上的文字。4. label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。5. input: 定义输入域，常用。可设置type属性，从而具有不同功能。6. textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。7. button: 定义一个按钮。8. select: 定义一个选择列表，即下拉列表。9. option: 定义下拉列表中的选项。接下来是对这些表单素的具体分析。<form name=”” action=”” method=”get”>……</form>name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为”get”（也可以是post）<input type=”” name=”” value=”” size=””>name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）input常用type属性如下：1. text：单行文本输入框，可以通过正整数的size控制框长度。2. password：密码输入框。3. radio：单选按钮，同一组的单选按钮必须要有相同的name。4. checkbox：复选框，同一组的单选按钮必须要有相同的name。5. button：普通按钮。6. submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。7. reset：重置按钮，会重置当前表单中全部的内容。8. image：图像形式的提交按钮，写法是“”。9. hidden：隐藏域，隐藏字段对于用户是不可见的。10. file：文件域，用于文件上传。<select size=”” multiple=”multiple”><option hidden>选项1</option>……</select>size：下拉菜单的可见选项数；multiple：多选。在最新的html5中，有一些表单的新增属性，多用于js，如datalist : 定义填写一个input时，提示几个option用于提示。可通过input的list特性与此素作关联。output : 表示计算的结果。可通过for特性与其它能够影响运算的素（如input）作关联。还有一些新增的type属性：1. search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。2. tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉。3. url：编辑url的控件，提交时换行符与首位的空格都将自动去除。4. email：可输入一个邮件地址。5. color : 选择颜色的控件。6. date : 选择年月日的控件。此外，还有time、datetime、datetime-local、month、week、number、range类型。html5中input新增的一些较常用的特性：1. list：关联datalist所用的该datalist的id（即datalistform外建立，通过list关联即可）。2. pattern：一个正则表达式，用于检查控件的值，可作用于text、search、tel、url、email类型的input。3. form：一个字符串(为关联的form表单的id)，用于表明该input属于哪个form表单（作用类似list）。4. formmethod：表明使用GET还是POST，能覆盖form表单的method。仅在type为image或submit，且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。5. readonly：一个boolean值，表明该input值是否能被用户修改，可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。6. maxlength：type为text、emal、search、password、tel或url（都为文本）时允许输入的最大字符个数。7. autocomplete：浏览器是否根据之前提交的输入情况对此input自动填值（即以option形式匹配之前的输入值），取值on或off，默认on。如在登陆页面不想显示上一个登陆的用户名等时，可设置为off。参考文献1. html素-表单素及实用属性：http://blog.csdn.net/sigusoft_19865749/article/details/52490882″ target=”_blank”2. W3School HTML 表单 ： http://www.w3school.com.cn/html/html_forms.asp” target=”_blank”3. HTML5-input素新特性 ：http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date相关ppt见：https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/腾讯视频：https://v.sigusoft.com/x/page/o05246f2ah7.html问题整理1. 使用input上传文件或图片应该怎么办涉及到angularjs，可参考插件https://github.com/nervgh/angular-file-upload2. input为什么不使用闭合标签input为自闭和标签，详见W3C标准3. type=”number”在输入框右侧有上下箭头可以加减数字，怎么去掉箭头？使用type=”tel”时没有右侧上下箭头
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/54958.html
