HTML（三） — 表单设计 目录 1. 基本语法 2. 表单控件 2.1 input控件 input 常用属性： input type的表单项： 2.2 select 控件 2.3 textarea控件 2.4 label 控件 为什么需要表单？ 在我们网页中， 无论是提交搜索的信息，还是网上注册等都是需要使用表单。 使用表单目的是为了用户同服务器进行动态的信息交流。 1. 基本语法 HTML 表单是一种允许用户在 Web 页面上输入和提交数据的机制。 表单的常见属性： 属性属性值作用name名称用于指定表单的名称，用以区分同一个页面中的多个表单methodget/post设置表单数据的提交方式，取值为get或者postactionurl地址用以指定接收并处理表单数据的服务器程序的url地址；为空则提交给当前页enctypeMIME type指定传送数据的编码方式，默认值为application/x-www-form-urlencoded 示例演示： 结果展示： 
2. 表单控件 2.1 input控件 input 是输入的意思，而在表单素中 <input> 标签用于收集用户信息 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，展示不同的控件（如输入框、密码框、复选框、掩码后的文本控件、单选按钮、按钮等）。 input 常用属性： 属性属性值作用typevalue规定 input 素的类型。namefield_name定义 input 素的名称autofocusautofocus规定输入字段在页面加载时是否获得焦点。placeholdertext在输入域内给浏览者显示一段提示语句requiredrequired指示输入字段的值是必需的，不能为空valuevalue规定 input 素的值autocompleteon/off规定是否使用输入字段的自动完成功能checkedchecked规定此 input 素首次加载时应当被选中。disableddisabled当 input 素加载时禁用此素。patternregexp_pattern此属性相当于给input输入域加上验证模式，验证是为正则表达式maxlengthnumber规定输入字段中的字符的最大长度。 input type的表单项： 表单项作用<input type=”text”>单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符<input type=”password”>密码字段。该字段中的字符被掩码<input type=”submit”>提交按钮，将表单里的信息提交给action所指向的地址<input type=”reset”>定义重置按钮。重置按钮会清除表单中的所有数据<input type=”radio”>定义单选按钮<input type=”checkbox”>定义复选框<input type=”email”邮件框，具有校验功能<input type=”image”>定义图像形式的提交按钮<input type=”button”>定义可按钮，没有任何行为（可通过 JavaScript 启动脚本）<input type=”hidden”>定义隐藏的输入字段<input type=”file”>文件域 示例演示： 结果展示： 
2.2 select 控件 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时， 我们可以使用<select>标签控件定义下拉列表。 注 ：在<option> 中定义 selected =“ selected ” 时，当前项即为默认选中项。 示例演示： 结果展示： 
2.3 textarea控件 <textarea> 标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。 
2.4 label 控件 label 素的特点： 不会向用户呈现任何特殊效果。为鼠标用户改进了可用性。 如果您在 label 素内文本，就会触发此控件。 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关素的 id 属性相同。 代码演示： 结果展示： 
label 控件的使用效果 继续学习之路： HTML（一） — 基本标签 HTML（二） — 表格设计 HTML（三） — 表单设计 HTML（四） — 多媒体设计 如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/89004.html
