HTML的表单标签和无语义标签的讲解

迈不过友情╰ 2024-02-19 10:06 44阅读 0赞

![previewfile\_3015043227][previewfile_3015043227]

## HTML的表单标签 ##

表单是让用户输入信息的重要途径, 分成两个部分:

> 表单域: 包含表单元素的区域. 重点是 form 标签.  
> 表单控件: 输入框, 提交按钮等. 重点是 input 标签

### form 标签 ###

> 使用form进行前后端交互.把页面上,用户进行的操作/输入提交到服务器上

### input 标签 ###

> 有很多形态,能够表现成各种用户用来输入的组件,比如: 单行文本框, 按钮, 单选框, 复选框…….

*  type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
 *  name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
 *  value: input 中的默认值.
 *  checked: 默认被选中(用于单选按钮和多选按钮).
 *  maxlength: 设定最大长度.

#### 1.文本框 ####

> 单行文本框

代码

![image-20231107200631704][]

运行效果

![image-20231107195703347][]

#### 2.密码框 ####

> 单行文本框,专门用来输入密码的

代码  
![image-20231107201610420][]

运行效果

![image-20231107201119941][]

#### 3.单选框 ####

代码

![image-20231107205326392][]

运行效果  
![image-20231107205503544][]

> **问题: 当前代码运行后可以同时选择男,女,达不到单选的效果**

![image-20231107205729974][]

> 由于name属性相同的单选框,值之间是互斥的,所以单选框之间必须具备相同的 name 属性, 才能实现多选一效果

**改进的代码**  
![image-20231107211425633][]

> `<input type="radio" name="sex" checked="checked">女` 这代码的效果: 默认选择的是女.

运行效果

![image-20231107211324401][]

--------------------

#### 4.复选框 ####

代码

![image-20231107220830541][]

> 可以使用 checked 属性来设置默认选中的. `<input type="checkbox" checked="checked"> 学习` ,默认选中的就是学习.

运行效果

![image-20231107220853645][]

--------------------

#### 5.按钮 ####

代码  
![image-20231108000522344][]

运行效果  
![image-20231108000641403][]

> 对于按钮点击之后要干什么,需要通过 js 来配合.  
> `alert('hello')`就是 js 里的一个函数,它的功能就是一个对话框,对话框里的内容就是hello.  
> 代码: `<input type="button" value="这是一个按钮" onclick="alert('hello')">`

扩展后的运行效果:

![image-20231108004933727][]

#### 6.提交按钮 ####

~~ 搭配 form 使用

> `type="submit"`, 外表和 button 是差不多的,会触发 form 和服务器的交互.

#### 7.文件选择框 ####

代码  
![image-20231108120620294][]

运行结果  
![image-20231108121106146][]

--------------------

### select 标签 ###

下拉菜单

> option 中定义 selected=“selected” 表示默认选中.

代码  
![image-20231108132408733][]

运行效果

![image-20231108132315587][]

--------------------

### textarea 标签 ###

textarea 多行编辑框

代码  
![image-20231108135129511][]

运行效果

![image-20231108135012233][]

上述这些标签也可以称为是"控件"，构成一个图形化界面的基本要素

## 无语义标签: div & span ##

> 前面的标签都是有特定含义的,比如 h1: 一级标题, p: 段落, a: 超链接, img: 图片…….  
> 无语义标签就是没有特定含义,意思就是可以用在各种场景.

div 标签, division 的缩写, 含义是分割. 默认是独占一行, 称为块级元素.  
span 标签, 含义是跨度. 默认是不独占一行, 称为行内元素.

示例代码

![image-20231108155559113][]

运行效果  
![image-20231108155928062][]

> 博主推荐:  
> [HTML 的一个相关文档: MDN.HTML][HTML _ MDN.HTML]  
> [一个非常内容非常全面的文档: Quick Reference][Quick Reference]

[previewfile_3015043227]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0387942e40294720a7e94761966f98e6.png
[image-20231107200631704]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/13c660b778b94710960d3a14fcfa36dc.png
[image-20231107195703347]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c40e61fc66064ff49ccbb9be8bae1f7a.png
[image-20231107201610420]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0ac19c7c979240c097f4684a53a5bbe2.png
[image-20231107201119941]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2b72009b916445a9a7e7ab0fbdac4bb3.png
[image-20231107205326392]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e08a6a8f48f04184b3a36e9af57a0295.png
[image-20231107205503544]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/cd1e9e99f53e4f81b24ed9cc0942f73d.png
[image-20231107205729974]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/cfec690011cf44d0a575c23d6519d21c.png
[image-20231107211425633]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/13e8ed1489b4483cb2528e359bd3ac8d.png
[image-20231107211324401]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1afd8d196ffe4c8a82f0e7196f94888b.png
[image-20231107220830541]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e2a8fc32fdfa4a72a39191875154f9c8.png
[image-20231107220853645]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c8edc633e8524fc59daa5ec63b1f45da.png
[image-20231108000522344]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2d06c3f31c07483a957569f72924f053.png
[image-20231108000641403]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/457106c8a4484e8b89f70b85c47eecf9.png
[image-20231108004933727]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/5fb019e029ca47558b4afd15bcba297f.png
[image-20231108120620294]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ab549d2c1047409daa9b63d198d089c0.png
[image-20231108121106146]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/acae91d7758a461190ec97208950cca0.png
[image-20231108132408733]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/a6f211be4f7140ff88a96c00a25fe681.png
[image-20231108132315587]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/54937198394b425e90a6a4259fcd1cb8.png
[image-20231108135129511]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/5579e6293f704359ad86f69509fc129a.png
[image-20231108135012233]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0556c7e45486412687a6b2cb4fea727b.png
[image-20231108155559113]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d058ed8408e24b73b6c2627d9674bd53.png
[image-20231108155928062]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2b2c791759304c4ea816b36abb1bf5ee.png
[HTML _ MDN.HTML]: https://developer.mozilla.org/zh-CN/docs/Web/HTML
[Quick Reference]: https://quickref.cn/