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

HTML的表单标签

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

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

form 标签

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

input 标签

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

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

1.文本框

单行文本框

代码

运行效果

2.密码框

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

代码

运行效果

3.单选框

代码

运行效果

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

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

改进的代码

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

运行效果

---

---

---

4.复选框

代码

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

运行效果

---

5.按钮

代码

运行效果

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

扩展后的运行效果:

6.提交按钮

~~ 搭配 form 使用

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

7.文件选择框

代码

运行结果

---

---

---

select 标签

下拉菜单

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

代码

运行效果

---

---

---

textarea 标签

textarea 多行编辑框

代码

运行效果

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

无语义标签: div & span

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

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

示例代码

运行效果

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