Html5 表单语法，按钮和多选框，
2024-05-27 18:05:14
表单语法
<form method="post" action="result.html"><p>名字：<input name="name" type="text"></p><p>密码：<input name="pass" type="password"></p><p><input type="submit" name="Button" value="提交"/><input type="submit" name="Reset" value="重填"/></p>
</form>
规定如何发送表单数据常用值：get | post
表示向何处放送表单数据 ：action="result.html
表单的基本语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body>
<h1>注册</h1><!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式get方式提交：我们可以在url中看到我们提交的信息，不安全，高效post：比较安全，可以传输大文件
--><form action="我的网页.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="submit"><input type="reset">
</p>
</form>
</body>
</html>
表单元素格式
type：指定元素的类型。text，password，checkbox，radio，submit，reset，flie，hidden，image和button，默认为text。
name：指定表单元素的名称
value：元素的初始值。type为radio时必须指定一个值
size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：type为text或者password时，输入的最大字符数
checke：type为radio或checkbox时，指定按钮是否是被选中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body>
<h1>注册</h1><!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
--><form action="我的网页.html" method="get">
<!--文本输入框：input type="text"value="张鑫" 默认的初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度-->
<p>名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>密码:<input type="password" name="pwd">
</p><!--单选框标签:input type="radio"value:单选框的值name：表示组数（如果组数相同就能选一个，组数不同就能全选）--><p>性别:<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex">女</p>
<p><input type="submit"><input type="reset">
</p>
</form>
</body>
</html>
按钮和多选框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body>
<h1>注册</h1><!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
--><form action="我的网页.html" method="get">
<!--文本输入框：input type="text"value="张鑫" 默认的初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度-->
<p>名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>密码:<input type="password" name="pwd">
</p><!--单选框标签:input type="radio"value:单选框的值name：表示组数（如果组数相同就能选一个，组数不同就能全选）--><p>性别:<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p><!--多选框input type="checkbox"--><p>爱好:<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><!--按钮input type="button" 普通按钮input type="image" 图像按钮input type="submit"提交按钮input type="reset" 重置--><p>按钮:<input type="button" value="点击变长"/><input type="image" src="../../resources/image/01.JPG"></p>
<p><input type="submit"><input type="reset">
</p>
</form>
</body>
</html>
列表框文本域和文件域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body>
<h1>注册</h1><!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
--><form action="我的网页.html" method="get">
<!--文本输入框：input type="text"value="张鑫" 默认的初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度-->
<p>名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>密码:<input type="password" name="pwd">
</p><!--单选框标签:input type="radio"value:单选框的值name：表示组数（如果组数相同就能选一个，组数不同就能全选）--><p>性别:<input type="radio" value="boy" name="sex" checked/>男<input type="radio" value="girl" name="sex"/>女</p><!--多选框input type="checkbox"--><p>爱好:<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><!--按钮input type="button" 普通按钮input type="image" 图像按钮input type="submit"提交按钮input type="reset" 重置--><p>按钮:<input type="button" value="点击变长"/><input type="image" src="../../resources/image/01.JPG"></p><!--下拉框，列表框--><p>国家:<select name="列表名称"><option value="选择的值">中国</option><option value="选择的值">美国</option><option value="选择的值" selected>印度</option><option value="选择的值">瑞士</option></select></p><!--文本域cols是:行roes:列--><p>反馈:<textarea name="textarea" cols="50" rows="10"></textarea></p><!--文件域input type="file"name="files"--><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p>
<p><input type="submit"><input type="reset">
</p>
</form>
</body>
</html>
特殊按钮：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body>
<h1>注册</h1><!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
--><form action="我的网页.html" method="get"><!--文本输入框：input type="text"value="张鑫" 默认的初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度--><p>名字:<input type="text" name="username"/></p><!--密码框:input type="password="--><p>密码:<input type="password" name="pwd"></p><!--单选框标签:input type="radio"value:单选框的值name：表示组数（如果组数相同就能选一个，组数不同就能全选）--><p>性别:<input type="radio" value="boy" name="sex" checked/>男<input type="radio" value="girl" name="sex"/>女</p><!--多选框input type="checkbox"--><p>爱好:<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><!--按钮input type="button" 普通按钮input type="image" 图像按钮input type="submit"提交按钮input type="reset" 重置--><p>按钮:<input type="button" value="点击变长"/><input type="image" src="../../resources/image/01.JPG"></p><!--下拉框，列表框--><p>国家:<select name="列表名称"><option value="选择的值">中国</option><option value="选择的值">美国</option><option value="选择的值" selected>印度</option><option value="选择的值">瑞士</option></select></p><!--文本域cols是:行roes:列--><p>反馈:<textarea name="textarea" cols="50" rows="10"></textarea></p><!--文件域input type="file"name="files"--><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p><!--邮件验证--><p><input type="email" name="email"></p><!--URL--><p><input type="url" name="url"></p><!--数字--><p>商品数量:<input type="number" name="number" max="100" min="0" step="1"></p><!--滑块input type="range"--><p>音量<input type="range" name="voice" max="100" min="0" step="2"></p><!--搜索框--><p>搜索:<input type="search" name="search"></p><p><input type="submit"><input type="reset"></p>
</form>
</body>
</html>
表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body>
<h1>注册</h1><!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
--><form action="我的网页.html" method="get"><!--文本输入框：input type="text"value="张鑫" 默认的初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度--><p>名字:<input type="text" name="username" value="admin" readonly/></p><!--密码框:input type="password="--><p>密码:<input type="password" name="pwd" hidden></p><!--单选框标签:input type="radio"value:单选框的值name：表示组数（如果组数相同就能选一个，组数不同就能全选）--><p>性别:<input type="radio" value="boy" name="sex" checked disabled/>男<input type="radio" value="girl" name="sex"/>女</p><!--多选框input type="checkbox"--><p>爱好:<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><!--按钮input type="button" 普通按钮input type="image" 图像按钮input type="submit"提交按钮input type="reset" 重置--><p>按钮:<input type="button" value="点击变长"/><input type="image" src="../../resources/image/01.JPG"></p><!--下拉框，列表框--><p>国家:<select name="列表名称"><option value="选择的值">中国</option><option value="选择的值">美国</option><option value="选择的值" selected>印度</option><option value="选择的值">瑞士</option></select></p><!--文本域cols是:行roes:列--><p>反馈:<textarea name="textarea" cols="50" rows="10"></textarea></p><!--文件域input type="file"name="files"--><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p><!--邮件验证--><p><input type="email" name="email"></p><!--URL--><p><input type="url" name="url"></p><!--数字--><p>商品数量:<input type="number" name="number" max="100" min="0" step="1"></p><!--滑块input type="range"--><p>音量<input type="range" name="voice" max="100" min="0" step="2"></p><!--搜索框--><p>搜索:<input type="search" name="search"></p><!--增强鼠标可用性--><p><label for="mark">点我试一试</label><input type="text" id="mark"></p><p><input type="submit"><input type="reset"></p>
</form>
</body>表单初级验证
思考为什么要进行表单验证
常用方式
placeholder 提示信息
require 非空判断
pattern 正则表达式
Html5 表单语法，按钮和多选框，相关推荐
- PHP表单登记表，输出复选框的值
//学号:(必填项,表单输入,判断数字,判断数字范围) //姓名:(必填项,表单输入,判断字母或数字) //年级:(必填项,单选下拉菜单) //专业:(必填项,单选下拉菜单) //选修课:(多选按钮) ...
- html自定义单选按钮,美化表单——自定义单选按钮和复选按钮
大家都知道,在Web的Form中美化是最头痛的,尤其是表单中的"input[type=checkbox]"."input[type="radio"]& ...
- html5 表单的required属性
html5 表单的required属性 描述 今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性 定义和用法 required 属性是一个布尔属 ...
- HTML5表单提交和PHP环境搭建
1. HTML5表单的创建 HTML表单 1.表单用于不同类型的用户输入 2.常用表单标签: <form> 表单 <input> ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 【HTML5】Web前端——第三课：HTML5 表单相关元素和属性
知识点:原有的表单元素及表单控件.HTML5 表单新增功能类型.HTML5 表单控件新增的属性 推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单 1.原有的表单元素及表单控件 表单,是页 ...
- HTML表单语法结构
"我相信,我写过的每一行代码,都是蝴蝶翅膀的一次震动,最终能在混沌之中掀起飓风." 表单语法 <form method="post" action=&qu ...
- BootStrap_03(表单、按钮、图片、辅助类)
哈喽,直接进入正题:今天内容是表单.按钮.图片.辅助类 一.表单 1.基本表单 a. class="form-control":可以给<input>.<text ...
- HTML5表单的创建及与PHP的交互
2019独角兽企业重金招聘Python工程师标准>>> Html5表单 <!DOCTYPE html> <html> <head lang=" ...
最新文章
- 北科大matlab,北科大matlab第五次作业多项式及其相关计算.doc
- _itemmod_day_limit
- jquery添加的html元素按钮为什么不执行类样式绑定的click事件
- 关于私有云与存储风向的深度解读
- 64位java_99.9%的Java程序员都说不清的问题：JVM中的对象内存布局？
- Android Note - 内存优化
- 林辉高考机器人_机器人2019年参加高考 力争考上一本
- Java工作笔记-使用Maven创建Spring Boot并生成war包外部tocamt运行
- hadoop的基本搭建
- 数据分析师初级—中级—高级，每个阶段都需要学习什么？
- 使用python调用浏览器实现自动转发微博
- VBM计算操作过程记录
- PreparedStatement防止SQL注入
- Memcached详解
- vga焊接线顺序_vga线序是怎么排列的？
- IT行业主要做些什么
- 2020 3月 月末总结（一个月的面试收获了什么）
- 钱诚11.16黄金原油早盘直通车，黄金原油顺势操作建议
- linux系统盘ssd,Linux系统下如何使用SSD固态硬盘
- mysql-mysql介绍
热门文章
- 无线网卡 无线上网卡 的介绍
- php 字符串分割的放法,php实现将字符串分割的方法
- 围观一个无限循环的奇葩代码，把电脑弄死机了
- 逆水寒斩鸿蒙称号,逆水寒岁月神偷称号选哪个最好 逆水寒岁月神偷称号怎么选择/选择推荐攻略...
- 【Android FileProvider】Couldn‘t find meta-data for provider with authority com.xxx.xxx.provider
- 数据库原理复习与知识点总结
- conda创建python虚拟环境常用指令和流程
- solrloud集群的配置，zoookeeper+IK分词器+solrcloud，以及集群连接，分片管理
- html+CSS制作照片墙
- Windows10 右击win标（或win+x快捷键）无反应的解决方法（开始菜单）