表单标签

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

表单域 <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 日
谢谢老板打赏