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. HTML与CSS学习

    HTML和CSS都是对页面前端的设计语言,两者是页面设计所必需掌握的两种语言.我自己的理解就是两种语言其中的HTML语言是一种标记语言,主要是对于页面的内容进行编写,表示.将自己想要在网页中表示的内容 ...

  2. cf936B

    题意简述:给出一个有向图,问从s出发是否能找到一条长度为奇数的路径并且路径的端点出度为0,存在就输出路径,如果不存在判断图中是否存在环,存在输出Draw,否则输出lose 题解:类似于DP,将每一个点 ...

  3. eclipse 项目资源与 java 编译器级别不致总是；说明资源路径位置类型Java编译器级别不匹配t

    问题:Description Resource Path Location Type Java compiler level does not match t 今天在自己项目中整合HBase API的 ...

  4. Mayor's posters POJ - 2528 线段树区间覆盖

    //线段树区间覆盖 #include<cstdio> #include<cstring> #include<iostream> #include<algori ...

  5. Life is Strange：《奇异人生》

    “生活就是一个陌生人”

  6. 【学习笔记】：一天搞定HTML

    PS:许多控制样式的标签在HTML5中都不推荐使用,建议使用CSS,如align,border等. 一.概念 HTML的英文全称:Hypertext Marked Language 超文本标记语言. ...

  7. STL-queue 队列

    #include <iostream> #include <queue> using namespace std; int main() { // queue也很简单 // p ...

  8. Pikachu-目录遍历

    目录遍历漏洞概述 在web功能设计中,很多时候我们会要将需要访问的文件定义成变量,从而让前端的功能便的更加灵活. 当用户发起一个前端的请求时,便会将请求的这个文件的值(比如文件名称)传递到后台,后台再 ...

  9. pandas模块的数据操作

    数据操作 数据操作最重要的一步也是第一步就是收集数据,而收集数据的方式有很多种,第一种就是我们已经将数据下载到了本地,在本地通过文件进行访问,第二种就是需要到网站的API处获取数据或者网页上爬取数据, ...

  10. Spark kafka flume

    Flume Flume 是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,通过监控整个文件目录或者某一个特定文件,用于收集数据:同时Flume也 提供数据写到各种数据接 ...