html5表格的标签_vue基本知识

html5表格的标签_vue基本知识HTML5学习日记(七)——表单标签HTML5学习日记(七)表单标签表单相关标签,包括input系列标签、button按钮标签、select下拉菜单标签、textarea文本域标签、label标签五个部分。一、input系列标签在网页中显示收集用户

HTML5学习日记(七)——表单标签   HTML5学习日记(七)   表单标签   表单相关标签,包括input系列标签、button按钮标签、select下拉菜单标签、textarea文本域标签、label标签五个部分。   一、input系列标签   在网页中显示收集用户信息的表单效果,input标签可以通过type属性值的不同,展示不同效果。   type属性值:text,在网页中显示输入单行文本的表单控件。常用属性:placeholder 占位符,提示用户输入内容的文本;
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.1 placeholder属性值   type属性值:password,在网页中显示输入密码的表单控件。常用属性:placeholder 占位符,提示用户输入内容的文本;   type属性值:radio:在网页中显示多选一的单选表单控件。常用属性:name 分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中;checked 默认选中;
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.2 name属性值   type属性值:checkbox,在网页中显示多选多的多选表单控件。常用属性:name 分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中;checked 默认选中;   type属性值:file,在网页中显示文件选择的表单控件。常用属性:multiple 多文件选择;
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.3 multiple属性值   type属性值:submit,提交按钮。之后提交数据给后端服务器;   type属性值:reset,重置按钮。之后恢复表单默认值;   type属性值:button,普通按钮。默认无功能,之后配合js添加功能;
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.4 type属性展示   二、button按钮标签   在网页中显示用户的按钮,谷歌浏览器中button默认是提交按钮,button标签是双标签,更便于包裹其他内容:文字、图片等。   type属性值:submit,提交按钮。之后提交数据给后端服务器;   type属性值:reset,重置按钮。之后恢复表单默认值;   type属性值:button,普通按钮。默认无功能,之后配合js添加功能;
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.5 button按钮标签   三、select下拉菜单标签   在网页中提供多个选择项的下拉菜单表单控,select标签:下拉菜单的整体;option标签:下拉菜单的每一项。   selected属性值::下拉菜单的默认选中
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.6 select下拉菜单标签   四、textarea文本域标签   在网页中提供可输入多行文本的表单控件,右下角可以拖拽改变大小,实际开发时针对于样式效果推荐用CSS设置。   常见属性:cols:规定了文本域内可见宽度;   常见属性:rows:规定了文本域内可见行数。
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.7 textarea文本域标签   五、label标签   常用于绑定内容与表单标签的关系。使用label标签把内容(如:文本)包裹起来 2. 在表单标签上添加id属性 3. 在label标签的for属性中设置对应的id属性值;直接使用label标签把内容(如:文本)和表单标签一起包裹起来 2. 需要把label标签的for属性删除即可。
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.8 label标签   六、form标签   为用户输入创建HTML表单。(1)表单能够包含 input 素,比如文本字段、复选框、单选框、提交按钮等等;(2)表单还可以包含 menus、textarea、fieldset、legend 和 label 素;(3)表单用于向服务器传输数据。
html5表格的标签_vue基本知识
html5表格的标签_vue基本知识   Fig.9 form标签

2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/72591.html

(0)
上一篇 2024年 8月 6日 上午11:10
下一篇 2024年 8月 6日 上午11:14

相关推荐

关注微信