表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

表单域 <form>

语法：

<form  action=“url地址（指定服务器程序的url）”   method=“提交方式”   name=“表单域名称”>

各种表单控件

</form>

提交方式：get/post

轮廓线：outline

给表单添加outline：0；或者outline：none；样式后，就可以去掉默认的蓝色边框；

input系列标签

场景：在网页中显示 收集用户信息的表单效果。如：登陆页面、注册页

标签名：input；input标签可以通过type属性值的不同，展示不同效果

Type属性值：

常用属性：placeholder：占位符，提示用户输入内容的文本

拓展：Value属性和name属性作用介绍：

  • value：用户输入的内容，提交之后会发送给后端服务器 name：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义 后端接收到的数据的格式是：name的属性值=value的属性值

注意点：

  1. 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
  2. type属性不要拼错或者多加空格，否则相当于设置了默认值状态；text模式
  3. checked：默认选中，属性值可省略
  4. multiple：多文件选择，属性值可省略
  5. 如果需要实现上述按钮功能，需要配合form标签使用。Form使用方法：用form标签把表单标签一起包裹起来即可。Form表单标签。

button按钮标签

场景：在网页中显示用户点击的按钮

属性值：reset、submit、button

注意点：

  1. 谷歌浏览器中button默认是提交按钮；
  2. 双标签，更便于包裹其他内容：文字、图片等；

select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

Select标签：下拉菜单的整体Option标签：下拉菜单的每一项

常见属性：Selected：下拉菜单的默认选中

textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

常见属性：

Cols：规定了文本域内可见宽度Rows：规定了文本域内可见行数
防止拖拽文本域：resize：none；

单行文本溢出文字由省略号代替，需要满足以下三个条件：

  1. 强制一行内显示文本。White-space：nowrap；（默认normal自动换行）
  2. 超出部分隐藏。Overflow：hidden；
  3. . 用省略号代替超出部分。Text-overflow：ellispsis；

多行文本溢出文字由省略号代替：

注意点：

  1. 右下角拖拽改变大小
  2. 实际开发时针对于样式效果推荐使用CSS设置

label标签

场景：常用于绑定内容与表单标签的关系

使用方法一：

  1. 使用label标签把内容包裹起来
  2. 在表单标签上添加 id属性
  3. 在label标签的for属性中设置对应的id属性值

代码演示：

<input type="radio" id="info"><lable for="info">单选</lable>

使用方法二：

  1. 直接使用label标签把内容和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可

代码演示：

<table>
<input type="radio">单选
</table>

新增属性

  1. required：required；表单拥有该属性表示其内容不能为空，必填；
  2. autofocus：autofocus；自动聚焦属性，页面加载完成自动聚焦到指定表单
  3. autocomplete：off/on；当用户在字段开始键入时，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。默认已经打开，需要放在表单内，同时加上name属性，同时成功提交。
  4. multiple：multiple；可以多选文件提交。

语义化标签

学习路径：

  1. 没有语义的布局标签
  2. 有语义的布局标签

无语义：div和span

  1. div：一行只显示一个（独占一行）2. span：一行可以显示多个

有语义：

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

  1. header：网页头部
  2. nav：网页导航
  3. footer：网页底部
  4. aside：网页侧边栏
  5. section：网页区块
  6. article：网页文章

注意点：以上标签显示特点和div一致，但是比div多了不同的语义

字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文；

常见字符实体：在实体名称前加上英文下的 & 符号（如：&nbsp; ）因为解析问题说以表格里没加。

显示结果描述实体名称
空格nbsp;
<小于号lt；
>大于号gt；
&和号amp；
”引号quop；
`撇号apos；（IE不支持）
¢分（cent）cent；
￡镑（pound）pound；
￥( HimotoHimoto;
€欧元（euro）euro；
§小节sect；
©版权（copyright）copy；
最后修改：2022 年 11 月 08 日
© 允许规范转载
谢谢老板打赏