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. centos7添加网卡

    centos7添加桥接网卡 1.使用ip a 命令查看是否有新加的网卡 如上图新网卡为ens36,默认分配ip为192.168.3.14 2. 使用nmcli conn 命令查看新网卡的uuid 3. ...

  2. 如何知道一个路由器的 BSSID ？

    使用 Mac 连接上这个路由器,然后使用 option 按 wifi 按钮,可以在详情页里找到. 有些路由中继的设置需要使用 BSSID ,比如 pandorabox openwrt

  3. switch 语句 总结笔记

    1.switch 语句 语法: switch(expression) { case value1 : statement1; break; case value2 : statement2; brea ...

  4. P1525 关押罪犯【二分+二分图】

    输入输出样例 输入 #1 复制 4 6 1 4 2534 2 3 3512 1 2 28351 1 3 6618 2 4 1805 3 4 12884 思路 对于要求最大值最小的问题,不难想到二分. ...

  5. laravel orWhere

    场景描述 需要根据商品分类.商品名称和条形码这三个查询条件去取出结果集,这三者的关系是:商品分类 and (商品名称 or 条形码) 错误尝试 第一次写出来的代码是这样的: $goodsModel = ...

  6. Uva1639（概率期望/对数处理避免丢失精度）

    Uva1639 题意: 有两个盒子各有n个糖果(n<=200000),每天随机选择一个:选第一个盒子的概率是p(0 ≤ p ≤ 1),第二个盒子的概率为1-p,然后吃掉其中的一颗.直到有一天,随 ...

  7. MVC开发之Razor的使用

    一.运用布局和视图起始文件 布局的使用,可以简化视图,允许用户创建能够运用于多个视图的通用HTML,并使得维护更加容易.下面是一个简单的例子: 域模型类: public class Product { ...

  8. 第31届IMO 第2题

    题目 设n>=3,考虑一个圆上由2n-1个不同点构成的集合E.现给E中恰好k个点染上黑色,如果至少有一对黑点使得这两个黑点之间的弧上(两段弧中的某一个)包含恰好E中的n个点,就成这样的染色方法是 ...

  9. 杜教筛BM

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...

  10. PP: Articial Intelligence—TheRevolution Hasn’t HappenedYet

    From Michael I. Jordan As with many phrases that cross over from technical academic fields into gene ...