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 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
2天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
14天前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
14天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
38 4
|
2月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
4月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
3月前
|
数据安全/隐私保护
HTML4(三):表单
HTML4(三):表单
22 0
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义