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

这篇具有很好参考价值的文章主要介绍了HTML基础--Form表单--内联元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

Form表单

表单元素

创建表单 ()

文本输入 ()

密码输入

单选按钮 () 和 复选框 ()

下拉列表 () 和 选项 ()提交按钮 ()

重置按钮 ()

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


Form表单

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

HTML基础--Form表单--内联元素,# HTML基础,html,前端,java

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

<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="请输入用户名">

HTML基础--Form表单--内联元素,# HTML基础,html,前端,java

密码输入

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

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

温馨提示

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

 HTML基础--Form表单--内联元素,# HTML基础,html,前端,java

单选按钮 (<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等文章来源地址https://www.toymoban.com/news/detail-712671.html

到了这里,关于HTML基础--Form表单--内联元素的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML的form表单标签详解~

    通过HTML提交表单数据有web中是非常常用的操作,所以有必要详细、仔细学习了解HTML的form表单。 示例代码: 答:在HTML中, novalidate 是一个布尔属性,通常用于 form 元素中。它用来指示浏览器不应该对表单中的输入进行验证, 即不执行浏览器默认的表单验证行为。 当表单中

    2024年02月11日
    浏览(37)
  • html5中 块级元素与内联元素的解释和设置 display

    a{display:block;} div{      display:inline;  } 1、每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。 2、块级元素:占据一定矩形空间,可以通过设置高度、

    2024年02月08日
    浏览(52)
  • html的表单标签(上):form标签和input标签

    表单是让用户输入信息的重要途径。 用表单标签来完成与服务器的一次交互,比如你登录QQ账号时的场景。 表单分成两个部分: 表单域:包含表单元素的区域,用 form 标签来表示。 表单控件:输入框,提交按钮等,用 input 标签来表示。 描述了要把数据按照什么方式,提交

    2024年02月20日
    浏览(41)
  • HTML常用表单元素使用?

    ## 表单的基本语法 ``` form action=\\\"表单提交地址\\\" method=\\\"提交方法\\\" … 文本框、按钮等表单元素… /form ``` ### 表单属性: - action 将表单数据提交到指定地址 - method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。 ### get和post的区别 - get:从指定的资源请求数据。 - pos

    2024年02月05日
    浏览(57)
  • HTML5中form表单防止重复提交的两种方法

    form表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题 (1)点击提交按钮两次。 (2)点击刷新按钮。 (3)使用浏览器后退按钮重复之前的操作 导致重复提交表单。 (4)浏览器重复的HTTP请求。 (5)用户提交表单时可能因为网

    2024年01月22日
    浏览(44)
  • HTML5 中新增了哪些表单元素?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(49)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(65)
  • HTML中有哪些属于表单元素?那些属于表格元素?请分别列举5个并说明用途?

    在HTML中,有一些元素是专门用于表单的输入和布局,还有一些元素是专门用于表格的显示。以下是五个表单元素和五个表格元素,以及它们的用途: 表单元素: input :这是最常用的表单元素,用于获取用户输入的数据。可以通过不同的\\\"type\\\"属性值(如\\\"text\\\", \\\"password\\\", \\\"submit

    2024年01月22日
    浏览(49)
  • 【前端 - HTML】第 6 课 - 表单标签

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、表单标签 2.1、input 标签基本使用  2.2、input 标签占位文本  2.3、单选框 radio 2.4、上传文件  2.5、多选框 - checkbox 2.6、下拉菜单  2.7、文本域  2

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包