【前端寻宝之路】学习和使用表单标签和表单控件

这篇具有很好参考价值的文章主要介绍了【前端寻宝之路】学习和使用表单标签和表单控件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”


表单标签

用表单标签来完成服务器的一次交互

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

表单域-form标签

<form action=""></form>

注:以后学完CSS我们可以给他加东西.

表单控件-input标签

type属性
可以通过对type进行对应的取值来控制input的类型.
注意:表单控件要搭配表单域进行编写

(1)文本框

    <form action="">
        姓名<input type="text">
    </form>

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5

(2)密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
    </form>
</body>
</html>

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5

我们把text改成password就可以看到密码了.
【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5

(3)单选框

radio是一种输入类型,用于创建单选按钮
单选按钮允许用户从一组选项中选择一个选项。当用户选择其中一个选项时,其他选项将自动取消选择。
单选框之间必须具备相同的name属性,才能实现多选一的效果.
如果想默认选择某一个值可以利用checked属性值等于checked进行默认选择的设置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="gender" checked="checked"><input type="radio" name="gender" ></form>
</body>
</html>

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5


(4)复选框

当type取值为checkbox时表示的是复选框,可以只选一个或多个.

        爱好:<input type="checkbox"> 吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">打豆豆

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5


(5)普通按钮

<input type="button" value="我是个按钮">

当前按钮点击以后无反应,需要搭配JS使用

<input type="button" value="点击有惊喜" onclick="alert('你会暴富')">

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5


(5)提交按钮

<form action="https://blog.csdn.net/Aileenvov?type=blog">
    <input type="submit">
</form>

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5


(5)清空按钮

    <input type="reset">

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5


(5)提交文件

<input type="file">

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5
【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5

【前端寻宝之路】学习和使用表单标签和表单控件,前端寻宝之路系列,前端,学习,html5文章来源地址https://www.toymoban.com/news/detail-843945.html

到了这里,关于【前端寻宝之路】学习和使用表单标签和表单控件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Element UI 系列 - 表单标签和输入框对齐以及修改输入框长度

    前言 elementui 文档中如何使表单的标签和输入框分别对齐 类似于这样的效果, 虽然 Elementui官方文档写的有, 但是因为我不经常写前端, 每次都会忘记, 这里记录下 官方文档 https://element.eleme.cn/#/zh-CN/component/form 如上图, 主要是通过修改 label-postion 对齐, 另外 label-width 是修改左侧标

    2024年02月11日
    浏览(37)
  • 猿创征文|【HTML】标签学习之路

    💖 目录 一、HTML语法规范 1.基本语法概述 2.标签关系 二、HTML基本结构标签 1.第一个HTML页面 2.HTML基本结构标签总结 1.基本语法概述 html是由尖括号包围的,列如: html 。 html标签通常是成对出现的,列如:html和/html,我们称为 双标签 。标签对里的第一个标签是开始标

    2024年01月16日
    浏览(43)
  • Android学习之路(4) UI控件之文本框

    本节给大家带来的UI控件是:TextView(文本框),用于显示文本的一个控件,另外声明一点,我不是翻译API文档,不会一个个属性的去扣,只学实际开发中常用的,有用的,大家遇到感觉到陌生的属性可以查询对应的API!当然,每一节开始都会贴这一节对应API文档的链接:TextVi

    2024年02月13日
    浏览(39)
  • Android学习之路(4) UI控件之输入框

    本节引言: 在本节中,我们来学习第二个很常用的控件EditText(输入框); 和TextView非常类似,最大的区别是:EditText可以接受用户输入! 如下图,相信你对于这种用户登录的界面并不陌生,是吧,我们很多时候都用的这种界面 相比另外这种,下面这种又如何? 还不赖是吧,当

    2024年02月13日
    浏览(42)
  • webIDE表单标签以及包含选择器的使用

    IDE的使用 表单标签 css层叠样式表(cascading style sheet) 外链样式的好处 首先提高代码的复用性 他可以降低代码的耦合性 基本选择器 包含选择器

    2024年01月23日
    浏览(39)
  • Android学习之路(4) UI控件之Button (按钮)与 ImageButton (图像按钮)

    本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到

    2024年02月12日
    浏览(47)
  • Android学习之路(5) UI控件之Button (按钮)与 ImageButton (图像按钮)

    本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到

    2024年02月12日
    浏览(45)
  • 【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明

    一、图片标签 在介绍图片标签之前,首先可以了解一下图片的格式。 1、jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图; 2、gif:支持的颜色比较少,支持简单透明,支持动图; 3、png:支持的颜色丰富,支持复杂透明,不支持动图; 4、webp:是谷歌新推出

    2023年04月08日
    浏览(56)
  • 【前端|HTML系列第2篇】HTML零基础入门之标签元素

    大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入门。 掌握html常用表情的使用、基础特性以及用途。

    2024年02月11日
    浏览(69)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包