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/72591.html