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. python格式化输出保留2位小数

    我是小白就不用多说了,学习python做了个练习题,结果运行了一遍,发现输入金额后得到的有很多位小数, 虽然不知道为什么,但是看得很不舒服, 就想到应该把让小数点后只保留2位数 找到了方法:将{0}改 ...

  2. ORACLE10G非归档模式下RMAN异机迁库

    环境信息: 源库 目标库 操作系统 WIN7 WIN SVR 2012 R2 IP x.x.x.216 x.x.x.112 数据库版本 10.2.0.4.0 - 64bi 10.2.0.4.0 - 6 ...

  3. 如何在CentOS上安装Tensorflow的gpu版本？

    系统配置 系统版本: Centos7.6 语言: Python3.5(anaconda3 4.2) 框架: Tensorflow 安装依赖 sudo yum install openjdk-8-jdk ...

  4. 使用phpstudy向mysql中导入数据

  5. 使用 VMware Workstation Pro 安装新的虚拟机

     一.连接服务器 (1)“文件”右键 (2)输入用户名.密码连接服务器 二.创建新的虚拟机 (1) (2) (3) (4) (5) (6) (7) (8)  三.配置服务器 配置文档 - 链接:htt ...

  6. 如何使用GitHub中和别人合作开发一个项目

    第一步:找到别人在GitHub的项目,点击Fork跳转到自己的GitHub 第二步:跳转到自己页面后进行克隆下载 第三步:在自己的idea中修改完毕后,进行推送将自己GitHub的项目进行修改 第四步 ...

  7. PHP 实现遍历出目录及其子文件

    手册(有PHP4的实现方式哦):https://www.php.net/manual/zh/function.scandir.php 直接附代码吧PHP5和PHP7 直接有scandir()函数,遍历 ...

  8. oracke数据库分区新增

    1.发现一些过程执行报错,报错原因是'ora-14400插入的分区关键字未映射到任何分区',原来是2020年库表的时间子分区未扩展: 2.扩展子分区的语句是 ALTER TABLE 表名 MODIFY ...

  9. #4864. [BeiJing 2017 Wc]神秘物质 [FHQ Treap]

    这题其实挺简单的,有个东西可能稍微难维护了一点点.. \(merge\ x\ e\) 当前第 \(x\) 个原子和第 \(x+1\) 个原子合并,得到能量为 \(e\) 的新原子: \(insert\ ...

  10. PAT (Advanced Level) Practice 1005 Spell It Right (20 分) （switch）

    Given a non-negative integer N, your task is to compute the sum of all the digits of N, and output e ...