HTML的表单标签汇总

表单的元素格式：

1. 账号、密码、提交、重置

语法：

<p>账号：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<!--提交和重置-->
<p>
    <input type="submit">
    <input type="reset">
</p>

2. 单选框标签

type标签：radio

value：单选框标签

name：表示组。当两个name相同时：只能二选一；当两个组不同时，两个都都能选中。

语法：

<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女

3. 多选框标签

type标签：checkbox

name：表示组，同一组时，要用相同的组名。

<p>
    <!--多选框 ： input type = "checkbox"-->
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby"/>写代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
</p>

4. 下拉框

<p>
        <!--下拉框 ： input type = "checkbox"-->
        国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>
</p>

5. 文本域

<p>
<!--文本域-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

6. 文件域

<p>
<!--文本域-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

7. 邮件验证和URL验证

<p>
<!--邮件验证-->
邮箱：
<input type="email" name="email">
</p>

<p>
<!--URL验证-->
URL:
<input type="url" name="url">
</p>

8. 数字

<p>
    <!--数字-->
    商品数量：
    <input type="number" name="num" max="100" min="0" step="1">
</p>

9. 滑块

<p>
    <!--滑块-->
    音量：
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

10. 搜索框

<p>
    <!--搜索框-->
    搜索：
    <input type="search" name="search">
</p>

上述功能的完整代码和效果

当前完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单的提交位置，可以是网站，也可以是一个请求处理地址
method：两种方法：post和get
        get：可以在url种看到我们提交的信息，不安全，但是高效
        post: 不可以在url种看到我们提交的信息，比较安全，且可以传输大文件
-->
<form action="2.请求处理的地址.html" method="get">
    <!--文本输入框 ： input type = "text"-->
    <p>账号：<input type="text" name="username"></p>
    <!--密码框 ： input type = "password"-->
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <!--单选框 ： input type = "radio"-->
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <!--多选框 ： input type = "checkbox"-->
        •<input type="checkbox" value="sleep" name="hobby"/>睡觉
        •<input type="checkbox" value="code" name="hobby"/>写代码
        •<input type="checkbox" value="chat" name="hobby"/>聊天
        •<input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <p>
        <!--下拉框 -->
        国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>
​
    <p>
        <!--文本域-->
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
​
    <p>
        <!--文件域-->
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <p>
        <!--邮件验证-->
        邮箱：
        <input type="email" name="email">
    </p>
​
    <p>
        <!--URL验证-->
        URL:
        <input type="url" name="url">
    </p>
    <p>
        <!--数字-->
        商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    <p>
        <!--滑块-->
        音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    <p>
        <!--搜索框-->
        搜索：
        <input type="search" name="search">
    </p>
    <!--提交和重置-->
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

​
​
​
​

HTML的表单标签汇总的更多相关文章

  1. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

  2. SpringMVC学习系列（11） 之 表单标签

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  3. (转载)SPRINGMVC表单标签简介

    SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍Spri ...

  4. 第五节：表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...

  5. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. SpringMVC 表单标签

    引入标签库 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" ...

  7. SpringMVC表单标签简介

    在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...

  8. struts2：非表单标签

    非表单标签主要用于输出在Action中封装的信息,这在实际运用中是很常见的. 1. actionerror标签 <s:actionerror>标签主要用于输出错误信息到客户端,该标签将Ac ...

  9. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. 前端调用本地摄像头实现拍照（vue）

    由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. <template> <div class="camera_outer"> & ...

  2. 飘扬的旗帜！shader 编程实战！Cocos Creator！

    用 shader + mesh 立个 flag 吧! 文章底部获取完整代码! 效果预览 使用方法 创建一个空节点 添加用户脚本组件 mesh-texture-flag 添加图片 修改对应属性 实现原理 ...

  3. redis深入学习

    Redis持久化 官方文档: https://redis.io/topics/persistence 1.RDB和AOF优缺点 RDB: 可以在指定的时间间隔内生成数据集的时间点快照,把当前内存里的状 ...

  4. centos7 升级sqlite3

    升级sqlite3 官网 点击 1.下载源码 wget https://www.sqlite.org/2019/sqlite-autoconf-3300100.tar.gz 2.解压,编译 .tar. ...

  5. android中常用的布局管理器（二）

    接上篇博客 (3)LinearLayout     线性布局管理器 线性布局管理器是将放入其中的组件按照垂直或水平方向来布局,每一行或每一列只能放一个组件,并且不会换行,当组件排列到窗体的边缘后,后面 ...

  6. webserver代理生成本地类的两种方式

    方式1,把webservers地址请求出来的xml拷贝出来放到文本里面后缀改成wsdl文件在VS里面使用下列命令 C:\Program Files (x86)\Microsoft SDKs\Windo ...

  7. 在Windows7中的各种显示模式中桌面图标的尺寸

    在Windows7中的各种显示模式中,图标的尺寸 window7 桌面icon设计尺寸大小桌面图标设计尺寸一般是多少超大图标:256X256大图标:128X128中图标:32X32平铺:32X32列表 ...

  8. 解决Mac无法写入U盘问题

    注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/upan-to- ...

  9. linux安装最新(任意)版本nodejs

    首先在终端中使用命令 uname -a 查看系统版本 uname -a x86_64 是64位的 所以要安装64位对应的nodejs 打开nodejs中文网里的下载 找到64位的文件 点击后就下载了 ...

  10. 学习postgresql spi(一)

    #include "postgres.h" #include #include "fmgr.h" #include "access/xlog.h&qu ...