HTML表单标签大全并附有详细代码+案例

这篇具有很好参考价值的文章主要介绍了HTML表单标签大全并附有详细代码+案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML表单标签大全并附有详细代码+案例,前端宝典,html,前端,web



个人名片:

🐼作者简介:一名大二在校生
🐻‍❄️个人主页:落798.
🐼个人WeChat:落798.
🕊️系列专栏:零基础学java ----- 重识c语言 ---- 计算机网络【Spring技术内幕】
🐓每日一句:看淡一点在努力,你吃的苦会铺成你要的路!


HTML表单标签

HTML 表单用于搜集不同类型的用户输入。

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

1. 表单标签

HTML 表单用于收集用户输入,表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。

注意:元素是块级元素,其前后会产生折行。

<body> 
    <form >
        form elements
    </form>
</body>
1.1form表单的属性

action="url":请求地址,指定form表单向何处发送数据。

name="login":作用是给表单起名,为了便于我们操作。

enctype ="string":规定在发送表单数据之前,如何对表单数据进行编码。通常在使用文件上传时,我们会enctype=“multipart/form-data”,以二进制传输。

method ="get/post":指定表单以何种方式发送到指定的服务器程序,该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post。

2. 表单域

要提交数据的表单域必须加name属性。不然,该表单域的数据不会提交到服务器上。

2.1 标签

input用于收集用户信息,根据不同的类型显示不同的形式。input是空标签,它没有结束标签,在开始标签中结束。

<input> 元素根据不同的type属性,可以变化为多种形态。

<input> 元素设置name属性,用于网络请求时提交对应输入的字段。

input="text" 文本框

定义单行的输入字段,用户可在其中输入文本。它是一个单行文本框,input的默认类型即是text类型。

<form action="login.jsp">
    用户名:<input  name="userName" type="text">
</form>

input="password" 密码框

类型为password时,它用于收集用户输入的密码,在你输入时,浏览器会把输入的内容以符号来代替。

<form action="login.jsp">
    密码:<input  name="passworld" type="password">
</form>

文本框和密码框都可以添加placeholder属性,用于设置输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

type="radio" 单选框

类型为radio时,用于定义单选按钮,name属性值相同的input单选框只能有一个被选中。

checked="checked" 设置默认选中的单选框。
value="1"是提交到服务器时给后台程序员们看的。

<form action="login.jsp">
    性别:男 <input name="sex" checked="checked" type="radio" value="1"><input name="sex" type="radio" value="2">
 </form>

type="checkbox" 复选框

类型为checkbox时,用于定义复选按钮,复选框允许用户在一定数目的选择中选取一个或多个选项。

<form action="login.jsp">
    兴趣爱好:篮球 <input type="checkbox" name="like1" value="1" checked>
             足球 <input type="checkbox" name="like2" value="2">
             游泳 <input type="checkbox" name="like3" value="3">
             跑步 <input type="checkbox" name="like4" value="4">
</form>

type="file" 文件上传

类型为file时,默认为单文件上传。

multiple="multiple" 设置为多文件上传。

<form action="login.jsp">
    <input type="file" name="file" multiple="multiple">
</form>

type="hidden" 隐藏字段

隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。

<form action="login.jsp">
    <input type="hidden" name="hidden" value="123">
</form>
2.2 下拉列表

<select> 元素定义下拉列表,<option>元素定义待选择的选项。列表通常会把首个选项显示为被选选项,通过添加 selected 属性来定义预定义选项。

<form action="login.jsp">
    选择您喜欢的水果:
    <select name="select">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <!--榴莲设置为选中状态-->
        <option selected value="durian">榴莲</option>
    </select>
</form>

单选按钮、复选框默认选中用:checked属性。

下拉列表使用:selected属性。

使用size属性设置下拉列表展开,使用multiple属性设置多选。

<form action="login.jsp">
    <select name="select" size="4" multiple id="">
        <option value="1">重庆</option>
        <option value="2">武汉</option>
        <option value="3">北京</option>
        <option value="4">上海</option>
    </select>
    <input type="submit">
</form>
2.3 <textarea> 文本域

<textarea> 元素定义多行输入字段(文本域)

  • cols:规定文本区内的可见宽度。

  • rows:规定文本区内的可见行数。

<form>
    <textarea name="text" cols="50" rows="10"></textarea>
</form>

文本域可以添加placeholder属性,用于设置输入字段预期值的提示信息。

2.4 <label> 标签

label是input的描述,它本身不会有特殊效果,但它和其它input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”。

通过label的for指向按钮的id来绑定,for和id属性的值要相同。

<form action="login.jsp">
    <label for="userName">请输入用户名:</label>
    <input type="text" id="userName">
</form>
<form action="login.jsp">
    性别:
    <label for="man">男:</label>
    <input type="checkbox" id="man">
    <label for="woman">女:</label>
    <input type="checkbox" id="woman">
</form>

3. 表单按钮

type="reset" 重置按钮

重置按钮会清除表单中的所有数据。

value="重置"设置重置按钮上显示的文字。

<form action="login.jsp">
    用户名:<input name="userName" type="text">
    性别:男 <input name="sex" checked="checked" type="radio" value="1"><input name="sex" type="radio" value="2">
    <input type="reset" value="重置">
</form>

type="submit" 提交按钮

type="submit" 定义提交按钮。提交按钮用于向服务器发送表单数据,数据会发送到表单的 action 属性中指定的页面。

value="提交"设置提交按钮上显示的文字。

<form action="login.jsp">
    用户名:<input name="userName" type="text">
    性别:男 <input name="sex" checked="checked" type="radio" value="1"><input name="sex" type="radio" value="2">
    <input type="submit" value="提交">
</form>

type="button" 普通按钮

button类型的只是一个普通的按钮,而submit有一个提交的作用,在没有加js代码的情况下,button只是个装饰。

<form action="login.jsp">
    <input type="button" value="按钮">
</form>

type="image" 提交按钮

image类型的input也是具有一个提交的作用,不同的是可以指定一幅图片来作为按钮,不提倡使用image,因为它有时候会提交两次。

<form action="login.jsp">
    <input type="image" src="img/bg.jpg">
</form>

代码案例:利用以上属性实现一个用户登录信息界面

代码示例:

<from>
<h1 align = "center">用户注册</h1>

    用户名称:<input type="text" value="默认值"/><br/>
    用户密码:<input type="password" value="abc"/><br/>
    确认密码:<input type="password" value="abc"/><br/>
    性别:<input type="radio" name="sex"><input type = "radio" name="sex"><br/>
    兴趣爱好:<input type = "checkbox" checked ="checked"/>java<input type = "checkbox"/>c++<input type = "checkbox"/>html<br/>
    国籍:<select>
    <option>--请选择国籍--</option>
    <option selected="seclected">--中国--</option>
    <option>--美国--</option>
    <option>--韩国--</option>
    <option>--澳大利亚--</option>
</select><br/>
    自我评价:<textarea rows="10"cols="30">我才是默认值</textarea><br/>
    重置表单:<input type = "reset"/><br/>
    撤销按钮:<input type = "reset" value = "撤销"/><br/>
</form>

完整代码:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">

<!--form标签就是表单
input type = next     是文件输入框  value  设置默认显示效果
input type = password   是密码输入框   value设置默认显示效果
input type =radio 是单选  name属性可以对其进行分组  checked =“checked"表示默认选中
input type = "checkbox"复选框     checked =“checked"表示默认选中

select 标签是下拉框
option 标签是下拉列表框中的选项  selected="selected"设置默认选中

textarea 表示多行文本输入框 《起始标签和结束标签中间的值是默认值)
   rows 属性设置可以选择几行的高度
   clos 属性设置每行可以显示几个字符宽度
input type = "reset"是重置按钮   values属性修改文字内容
input type = "button"是按钮   values属性修改按钮文字内容
input type=hidden
input type=file 是文件上传域
input type=hidden 是隐藏域  当我们要发送给服务器的某些信息不需要用户参与,就可以使用
-->

<title>表单</title>
<head>
    <style>
        body {
            background-image: url("微信图片_20220520211010.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

        form {
            background-color: #f7f7f7;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 0 auto;
        }

        input[type="text"],
        input[type="password"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #e2e2e2;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }

        input[type="radio"],
        input[type="checkbox"] {
            margin-right: 5px;
        }

        input[type="reset"],
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #ffaa00;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }

        textarea {
            resize: none;
        }

        /* 示例动画效果 */
        input[type="text"]:focus,
        input[type="password"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            transform: scale(1.05);
            transition: all 0.3s ease;
        }

        /* 示例图标和图片 */
        input[type="reset"] {
            background-image: url("微信图片_20220520211010.jpg");
            background-repeat: no-repeat;
            background-position: center;
            text-indent: -9999px;
        }
    </style>
</head>
<body>
<h1 align = "center">用户注册</h1>

    用户名称:<input type="text" value="默认值"/><br/>
    用户密码:<input type="password" value="abc"/><br/>
    确认密码:<input type="password" value="abc"/><br/>
    性别:<input type="radio" name="sex"><input type = "radio" name="sex"><br/>
    兴趣爱好:<input type = "checkbox" checked ="checked"/>java<input type = "checkbox"/>c++<input type = "checkbox"/>html<br/>
    国籍:<select>
    <option>--请选择国籍--</option>
    <option selected="seclected">--中国--</option>
    <option>--美国--</option>
    <option>--韩国--</option>
    <option>--澳大利亚--</option>
</select><br/>
    自我评价:<textarea rows="10"cols="30">我才是默认值</textarea><br/>
    重置表单:<input type = "reset"/><br/>
    撤销按钮:<input type = "reset" value = "撤销"/><br/>
</form>
</body>
</html>

HTML表单标签大全并附有详细代码+案例,前端宝典,html,前端,web

欢迎添加微信,加入我的核心小队,请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇文章来源地址https://www.toymoban.com/news/detail-645521.html

到了这里,关于HTML表单标签大全并附有详细代码+案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • JAVA深化篇_29—— 线程使用之线程联合以及Thread类中的其他常用方法【附有详细说明及代码案例】

    线程联合 当前线程邀请调用方法的线程优先执行,在调用方法的线程执行结束之前,当前线程不能再次执行。线程A在运行期间,可以调用线程B的join()方法,让线程B和线程A联合。这样,线程A就必须等待线程B执行完毕后,才能继续执行。 join方法的使用 join()方法就是指调用该

    2024年02月05日
    浏览(48)
  • uniapp 封装弹窗组件(popup ,单选按钮,可以自选表单并提交表单)附有完整代码

     ↓界面结构如下 首先利用radio-group 中的label分成两部分,这样点单选按钮就可以出发整个label包裹的样式↓(点击label区域单选按钮亮起,触发radioChange方法改变radioState的状态) ↓  选中的效果可以参照↓ 完整代码如下↓ 如何使用该组件↓

    2024年02月16日
    浏览(38)
  • 2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新

    专项练习–持续更新 HTML篇 CSS篇 JS篇 Vue篇 TypeScript篇 React篇 微信小程序篇 前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 1.xhtml和html有什么区别 功能上 主要是 XHTML 可兼容各大浏览器、手机以及 PDA ,并且浏览器也能快速

    2024年02月12日
    浏览(58)
  • 5 HTML表单标签

    5 表单标签 表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁. 表单被form标签包含,内部使用不同的表单元素

    2024年02月12日
    浏览(44)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(63)
  • html的表单标签(上):form标签和input标签

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

    2024年02月20日
    浏览(40)
  • 前端HTML网页之间传递数据多种办法,附代码案例

       目前常用的有三种办法 session传递,cookie传递,url传递 url会暴露参数,其余的两个是保存在服务端和浏览器中,不会暴露在地址栏里面 使用url:   下面依次介绍 案例说明:  在HTML1中,我们使用 form 标签将数据提交到HTML2页面,并设置 method 为 post , action 为HTML2的文件路

    2024年02月09日
    浏览(104)
  • HTML的form表单标签详解~

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

    2024年02月11日
    浏览(36)
  • 常用HTML标签大全

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 HTML指的是超文本标记/标记语言。 注:超文本的意思是在浏览器世界中一些单词或字母被赋予特殊的权力。 注:head标签存放网页的

    2024年02月14日
    浏览(32)
  • (完整版)HTML5常用标签大全

    基础 格式 表单 框架 图像 音频/视频 链接 列表 表格 样式/节 元信息 编程

    2024年02月13日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包