HTML的表单标签汇总
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的表单标签汇总的更多相关文章
- SpringMVC 表单标签 & 处理静态资源
使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...
- SpringMVC学习系列（11） 之 表单标签
本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...
- (转载)SPRINGMVC表单标签简介
SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍Spri ...
- 第五节：表单标签的用法——value绑定和修饰符
1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如: v-model ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- SpringMVC 表单标签
引入标签库 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" ...
- SpringMVC表单标签简介
在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...
- struts2：非表单标签
非表单标签主要用于输出在Action中封装的信息,这在实际运用中是很常见的. 1. actionerror标签 <s:actionerror>标签主要用于输出错误信息到客户端,该标签将Ac ...
- [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
随机推荐
- 00-django | 01-构建博客目录
00-django | 01-构建博客目录 python Django 创建blog 进入到 manage.py 文件所在的目录(即项目根目录)下,运行 pipenv run python manag ...
- 【python基础语法】第7天作业练习题
import keyword ''' # 第一题:简单题 1.什么是全局变量? 2.什么是局部变量? 3.函数内部如何修改全局变量(如何声明全局变量 )? 4.写出已经学过的所有python关键字,分 ...
- P2746 [USACO5.3]校园网Network of Schools [tarjan缩点]
题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 BB 在 AA 学校的分发列表中,AA 也不一定在 BB 学校的列表中. ...
- mybatis_day01
Mybatis01 1.什么是mybatis 1.1mybatis 一个基于Java的持久层框架 1.2持久层 操作数据库那层代码 项目分层: 界面层(jps/controller) 业务层(serv ...
- Linux中“没有可用的软件包XX，但是它被其他软件包引用”的解决方法
踩坑经历 今天刚在虚拟机上安装好了ubuntu系统,在执行sudo apt install net-tools 命令时报错"没有可用的软件包net-tools,但是它被其他软件包引用&quo ...
- Ubuntu 搭建phpcms
安装Apache2 $ sudo apt-get update -y $ sudo apt-get install apache2 -y $ sudo systemctl start apache2. ...
- (办公)记事本_linux关机和重启命令
参考谷粒学院的linux视频教程:http://www.gulixueyuan.com/course/300/task/7091/show .sync Linux sync命令用于数据同步,sync命 ...
- java课后作业10.14
一.简单总结一下java中类的初始化的规律: 1.类的构造函数优先 2.初始化块儿和定义时候的赋值,这俩个初始化方法优先级是一样的,在程序中谁最后执行,那么程序就采用谁的初始化值. 二.在java中想 ...
- DoraBox sql注入&文件上传
SQL注入 1.sqli数字型 判断是否存在注入点,执行1 and 1=1,有回显判断存在注入点 判断字段数,执行1 order by 3以及执行1 order by 4时报错,判断字段数为3 判断具 ...
- 从接口自动化测试框架设计到开发（二）操作json文件、重构json工具类
用例模板里的请求数据多,看起来很乱,所以可以通过访问另外一个文件的方式获取请求数据 把请求数据都放在一个json文件中 取出login的内容: import json fp = open('G:/un ...