表单标签
目标:能够使用表单相关标签和属性,实现网页中表单类网页结构搭建
表单域 <form>
语法:
<form action=“url地址(指定服务器程序的url)” method=“提交方式” name=“表单域名称”>
各种表单控件
</form>
提交方式:get/post
轮廓线:outline
给表单添加outline:0;或者outline:none;样式后,就可以去掉默认的蓝色边框;
input系列标签
场景:在网页中显示 收集用户信息的表单效果
。如:登陆页面、注册页
标签名:input;input标签可以通过type属性值的不同,展示不同效果
Type属性值:
text:文本框,用于输入单行文本
password:密码框,用于输入密码
radio:单选框,用于多选一
checbox:多选框,用于多选多
date:类似下拉选项的选择日期的框,用于选择日期
file:文件选择,用于之后上传文件
submit:提交按钮,点击之后提交数据给后端服务器reset:重置按钮,点击之后恢复表单默认值
button:普通按钮,默认无功能,之后配合js添加功能,可通过value添加内容image:图片形式的提交按钮hidden:隐藏的输入字段
password:密码框,用于输入密码
radio:单选框,用于多选一
checbox:多选框,用于多选多
date:类似下拉选项的选择日期的框,用于选择日期
file:文件选择,用于之后上传文件
submit:提交按钮,点击之后提交数据给后端服务器reset:重置按钮,点击之后恢复表单默认值
button:普通按钮,默认无功能,之后配合js添加功能,可通过value添加内容image:图片形式的提交按钮hidden:隐藏的输入字段
常用属性:placeholder:占位符
,提示用户输入内容的文本
拓展:Value属性和name属性作用介绍:
value:用户输入的内容
,提交之后会发送给后端服务器name:当前控件的含义
,提交之后可以告诉后端发送过去的数据是什么含义
后端接收到的数据的格式是:name的属性值=value的属性值
注意点:
- 有相同name属性值的单选框为一组,一组中只能同时有一个被选中
- type属性不要拼错或者多加空格,否则相当于设置了默认值状态;text模式
checked:默认选中
,属性值可省略multiple:多文件选择
,属性值可省略- 如果需要实现上述按钮功能,需要配合form标签使用。Form使用方法:
用form标签把表单标签一起包裹起来即可。Form表单标签。
button按钮标签
场景:在网页中显示用户点击的按钮
属性值:reset、submit、button
注意点:
- 谷歌浏览器中button默认是提交按钮;
- 双标签,更便于包裹其他内容:文字、图片等;
select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
Select标签:下拉菜单的整体Option标签:下拉菜单的每一项
常见属性:Selected:下拉菜单的默认选中
textarea文本域标签
场景:在网页中提供可输入多行文本的表单控件
常见属性:
Cols:规定了文本域内可见宽度Rows:规定了文本域内可见行数
防止拖拽文本域:resize:none;
单行文本溢出文字由省略号代替,需要满足以下三个条件:
- 强制一行内显示文本。White-space:nowrap;(默认normal自动换行)
- 超出部分隐藏。Overflow:hidden;
- . 用省略号代替超出部分。Text-overflow:ellispsis;
多行文本溢出文字由省略号代替:
Overflow:hidden;
text -overflow:ellispsis;
display:-webkit-box;
text -overflow:ellispsis;
display:-webkit-box;
-webkit-line-clamp:2;限制在一个块级元素显示的文本行数;
-webkit-box-orient:vertical;设置或检索伸缩盒对象的子元素的排列方式。
注意点:
- 右下角拖拽改变大小
- 实际开发时针对于样式效果推荐使用CSS设置
label标签
场景:常用于绑定内容与表单标签的关系
使用方法一:
- 使用label标签把内容包裹起来
- 在表单标签上添加 id属性
- 在label标签的for属性中设置对应的id属性值
代码演示:
<input type="radio" id="info"><lable for="info">单选</lable>
使用方法二:
- 直接使用label标签把内容和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
代码演示:
<table>
<input type="radio">单选
</table>
新增属性
- required:required;表单拥有该属性表示其内容不能为空,必填;
- autofocus:autofocus;自动聚焦属性,页面加载完成自动聚焦到指定表单
- autocomplete:off/on;当用户在字段开始键入时,浏览器基于之前输入过的值,应该显示出在字段中填写的选项。默认已经打开,需要放在表单内,同时加上name属性,同时成功提交。
multiple:multiple;可以多选文件提交。
语义化标签
学习路径:
- 没有语义的布局标签
- 有语义的布局标签
无语义:div和span
- div:一行只显示一个(独占一行)2. span:一行可以显示多个
有语义:
场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用
标签:
- header:网页头部
- nav:网页导航
- footer:网页底部
- aside:网页侧边栏
- section:网页区块
- article:网页文章
注意点:以上标签显示特点和div一致,但是比div多了不同的语义
字符实体
场景:在网页中展示特殊符号效果时,需要使用字符实体替代
结构:&英文;
常见字符实体:在实体名称前加上英文下的 & 符号(如: )
因为解析问题说以表格里没加。
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | nbsp; | |
< | 小于号 | lt; |
> | 大于号 | gt; |
& | 和号 | amp; |
” | 引号 | quop; |
` | 撇号 | apos;(IE不支持) |
¢ | 分(cent) | cent; |
£ | 镑(pound) | pound; |
¥ | ( Himoto | Himoto; |
€ | 欧元(euro) | euro; |
§ | 小节 | sect; |
© | 版权(copyright) | copy; |
4 条评论
感谢分享,非常实用
感谢支持
赞
你们的鼓励就是我的动力