HTML5学习日记（七）——表单标签 HTML5学习日记（七） 表单标签 表单相关标签，包括input系列标签、button按钮标签、select下拉菜单标签、textarea文本域标签、label标签五个部分。 一、input系列标签 在网页中显示收集用户信息的表单效果，input标签可以通过type属性值的不同，展示不同效果。 type属性值：text，在网页中显示输入单行文本的表单控件。常用属性：placeholder 占位符，提示用户输入内容的文本；
Fig.1 placeholder属性值 type属性值：password，在网页中显示输入密码的表单控件。常用属性：placeholder 占位符，提示用户输入内容的文本； type属性值：radio：在网页中显示多选一的单选表单控件。常用属性：name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中；checked 默认选中；
Fig.2 name属性值 type属性值：checkbox，在网页中显示多选多的多选表单控件。常用属性：name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中；checked 默认选中； type属性值：file，在网页中显示文件选择的表单控件。常用属性：multiple 多文件选择；
Fig.3 multiple属性值 type属性值：submit，提交按钮。之后提交数据给后端服务器； type属性值：reset，重置按钮。之后恢复表单默认值； type属性值：button，普通按钮。默认无功能，之后配合js添加功能；
Fig.4 type属性展示 二、button按钮标签 在网页中显示用户的按钮，谷歌浏览器中button默认是提交按钮，button标签是双标签，更便于包裹其他内容：文字、图片等。 type属性值：submit，提交按钮。之后提交数据给后端服务器； type属性值：reset，重置按钮。之后恢复表单默认值； type属性值：button，普通按钮。默认无功能，之后配合js添加功能；
Fig.5 button按钮标签 三、select下拉菜单标签 在网页中提供多个选择项的下拉菜单表单控，select标签：下拉菜单的整体；option标签：下拉菜单的每一项。 selected属性值：：下拉菜单的默认选中
Fig.6 select下拉菜单标签 四、textarea文本域标签 在网页中提供可输入多行文本的表单控件，右下角可以拖拽改变大小，实际开发时针对于样式效果推荐用CSS设置。 常见属性：cols：规定了文本域内可见宽度； 常见属性：rows：规定了文本域内可见行数。
Fig.7 textarea文本域标签 五、label标签 常用于绑定内容与表单标签的关系。使用label标签把内容（如：文本）包裹起来 2. 在表单标签上添加id属性 3. 在label标签的for属性中设置对应的id属性值；直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2. 需要把label标签的for属性删除即可。
Fig.8 label标签 六、form标签 为用户输入创建HTML表单。（1）表单能够包含 input 素，比如文本字段、复选框、单选框、提交按钮等等；（2）表单还可以包含 menus、textarea、fieldset、legend 和 label 素；（3）表单用于向服务器传输数据。
Fig.9 form标签
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/35574.html
