HTML基础--Form表单--内联元素

简介: HTML基础--Form表单--内联元素

Form表单

HTML中的表单(<form>)是一个重要的元素,它用于收集用户输入的数据,比如文本、选择、单选、复选等。表单是与用户进行交互的主要途径之一,允许用户提交数据到服务器进行处理。

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

属性说明

action服务器地址

name表单名称

method中Get和Post的区别

  1. 数据提交方式,get把提交的数据url可以看到,post看不到
  2. get一般用于提交少量数据,post用来提交大量数据

表单元素

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮

  1. 表单标签
  2. 表单域
  3. 表单按钮
<form>
  <input type="text">
  <input type="submit">
</form>

创建表单 (<form>)

使用<form>标签来创建表单。表单需要指定action属性,该属性表示数据提交的目标URL,以及可选的method属性,指定提交数据的HTTP方法(通常为GET或POST)。

<form action="/submit" method="POST">
    <!-- 表单内容将在这里添加 -->
</form>

文本输入 (<input type="text">)

使用文本输入框来收集用户的文本输入。

<input type="text" name="username" placeholder="请输入用户名">

密码输入

(<input type="password">): 使用密码输入框来收集用户的密码。

<input type="password" name="password" placeholder="请输入密码">

温馨提示

密码字段字符不会明文显示,而是以星号或圆点替代

单选按钮 (<input type="radio">) 和 复选框 (<input type="checkbox">)

使用单选按钮和复选框来收集用户的单选和多选选择。

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="checkbox" name="interest" value="sports"> 体育
<input type="checkbox" name="interest" value="music"> 音乐

下拉列表 (<select>) 和 选项 (<option>)

使用下拉列表来让用户从预定义的选项中选择。

<select name="country">
    <option value="usa">美国</option>
    <option value="canada">加拿大</option>
    <option value="uk">英国</option>
</select>

提交按钮 (<input type="submit">)

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<input type="submit" value="提交">

重置按钮 (<input type="reset">)

使用重置按钮来清除表单中的所有输入。

<input type="reset" value="重置">

隐藏字段 (<input type="hidden">

使用隐藏字段来在表单中存储不可见的数据。

<input type="hidden" name="token" value="abcdef123456">

表单还支持更多类型的输入和自定义属性,以满足不同的需求。在实际使用表单时,还需要考虑数据验证和安全性等方面。你可以使用HTML5的表单验证特性或JavaScript来实现更复杂的表单验证逻辑。

块元素与行内元素(内联元素)

HTML5出现之前,经常把元素按照块级元素和内联元素来区分。在HTML5中,元素不再按照这种⽅式来区分, 而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别,被称为穿透的,元素可能属于不止⼀个类别,称为混合的。


详细参考地址:内容分类 - HTML(超文本标记语言) | MDN


虽然到了HTML5的版本,元素分类更细致了,但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分,这对我们的布局起到了至关重要的作用


内联元素和块级元素的区别

块级元素 内联元素
块元素会在页面中独占一行(自上向下垂直排列) 行内元素不会独占页面中的一行,只占自身的大小
可以设置width,height属性 行内元素设置width,height属性无效
⼀般块级元素可以包含行内元素和其他块级元素 ⼀般内联元素包含内联元素不包含块级元素

常见块级元素div、form、h1~h6、hr、p、table、ul、等

常见内联元素(行内元素)

a、b、em、i、span、strong等

行内块级元素(特点:不换行、能够识别宽高)

button、img、input等

相关文章
|
1月前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
|
2月前
|
数据安全/隐私保护
HTML 表单和输入
HTML 表单和输入。
13 3
|
18天前
HTML_表单标签
HTML_表单标签
16 0
|
7天前
|
存储 移动开发 安全
【专栏:HTML基础篇】HTML表单基础:创建用户交互界面
【4月更文挑战第30天】本文介绍了HTML表单的基础知识,包括表单的基本概念、输入元素(如文本框、密码框、单选/复选框、提交/重置按钮等)、表单属性(如action、method、target)以及表单验证。了解这些内容能帮助开发者创建功能齐全、交互性强的用户界面,提升网页开发技能。
|
15天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
14 0
|
19天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
33 0
|
19天前
|
移动开发 JavaScript 前端开发
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
37 0
|
20天前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
10 0
|
2月前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
18 1
|
1天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
8 1