HTML 表单

文章目录

    • 表单
      • 什么是表单
      • GET和POST两种提交方式有什么不同?
      • 表单元素
        • 表单项外文本
        • 单行文本输入框
        • 单行文本密码框
        • 单选框
        • 复选框
        • 下拉列表框
        • 上传文件
        • 隐藏域
        • 填写邮箱
        • 填写电话
        • 填写数字
        • 填写日期
        • 进度条
        • 多行文本输入框
        • 提交按钮
        • 取消按钮
      • 用户注册案例

表单

什么是表单

form:表单元素
此元素可以通过嵌套在内部的各种表单项元素 以键值对的形式收集用户填写的信息,例如用户名密码等,当表单提交时,最终将信息提交到action设置的目的地
action:属性表示表单提交到的目的地
method:提交表单的方式,存在以下两种方式 get和post

GET和POST两种提交方式有什么不同?

GET:提交表单速度快,安全性低,通过浏览器的地址栏进行传输
格式为: 目的地?key=value&key2=value2&key3=value3&keyN=valueN
最多传递256个字符,不支持中文 仅仅支持字符串 如果使用链接则肯定为get

POST:提交速度慢,安全性高,不通过浏览器的地址栏传递,无法从地址栏发现用户书写的内容,通过消息体传递值,格式与get一致不支持中文,没有大小限制,如果进行上传操作,则必须使用post注意链接提交无法使用post,必须是get

表单元素

表单项外文本

label:用来设置表单项外的文本,for属性对应表单项中的id属性

<label for="nameid">用户姓名:</label>
单行文本输入框

type="text"此属性为固定写法
name:表示键值对的键,可以随意书写不能不写
id:对应label中的for属性,使之连为一体
required:属性表示不能不填
minlength:表示最小长度
maxlength:最大长度
placeholder:单行文本输入框的提示文本当用户书写时消失
value:此属性一般不书写,就表示键值对的值,用户在此单行文本输入框中输入的值就是value值
autocomplete:设置为off,则关闭自动完成功能
autofocus:自动获得焦点,在很多场合此属性使用较多,但是兼容性较差有时需要手动实现此功能

<input type="text" name="myname" id="nameid" required minlength="4" maxlength="8"placeholder="请输入用户姓名" autocomplete="off" autofocus>
单行文本密码框

type="password"此属性为固定写法
name:键值,随意书写

所谓的随意书写: 尽量不要涉及以下几种情况
a:中文
b:空格
c:横线 -
d:数字开头
e:特殊字符
如果想隔开字符,则可以使用_,例如 user_name

其它属性与单行文本输入框完全一致

注意:

  • 在前端领域id属性不管使用何种技术id上下文唯一
  • maxlength和minlength不作为验证的手段
  • 一般复杂的验证多使用js或者正则表达式
  • 这两个属性浏览器差异性及其严重
<input type="password" name="mypass" id="passid" required autocomplete="off"maxlength="8" minlength="4" placeholder="请输入用户密码">
单选框

type="radio"
checked:表示默认选中
name值必须相同

<label>性别:</label>
<input type="radio" name="gender" value="0" checked /><input type="radio" name="gender" value="1" />
复选框

type="checkbox"

<label>爱好:</label>
<input type="checkbox" name="hobby" value="soccer" />足球
<input type="checkbox" name="hobby" value="running" />跑步
<input type="checkbox" name="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" value="shopping" checked />购物
<input type="checkbox" name="hobby" value="game" />游戏
下拉列表框

selected默认选中

<label for="locationid">归属地:</label>
<select name="location" id="locationid"><option value="hubei">湖北</option><option value="guangdong">广东</option><option value="shandong" selected>山东</option><option value="sichuan">四川</option><option value="zhejiang">浙江</option>
</select>
上传文件

type="file"
这是唯一一个必须将method属性设置为post的表单项并且value值不再是字符串

<label for="upid">上传文件:</label>
<input type="file" name="up" id="upid" />
隐藏域

type="hidden"
用户无法从页面中查看隐藏域,一般是开发者放置在表单中的一个
元素,当表单提交时,以键值对的形式在用户不知情的情况下提交到服务器端
多使用在分页,修改等场合

<input type="hidden" name="thisiskey" value="thisisvalue" />
填写邮箱

type="email"
必须填写合法的邮箱名,否则无法验证通过
XXX@XXX.com
.com 公司
.net 网站
.gov 政府
.org 组织

<label for="emailid">输入邮箱:</label>
<input type="email" name="email" id="emailid" required />
填写电话

type="tel"
必须填写合法的电话 这个电话一般还是要搭配正则表达式,这里的pattern属性就对应正则表达式

<label for="telid">输入电话:</label>
<input type="tel" name="tel" id="telid" required />
填写数字

type="number"
max:最大值
min:最小值

<label for="testid">考核成绩:</label>
<input type="number" name="number" id="testid" min="0" max="100" value="60" />
填写日期

type="date"
选择的日期按照 yyyy-MM-dd 年月日的格式输出

<label for="dateid">出生日期:</label>
<input type="date" name="date" id="dateid" required />
进度条

兼容性较差

进度条:<meter max="100" min="0" value="60"></meter>
多行文本输入框

必须是开闭合标签
cols:一行可以输入多少个字符
rows:可以存在几行

<label for="weiboid">您有什么新鲜事告诉大家:</label>
<textarea name="weibo" id="weiboid"cols="30" rows="5" required ></textarea>
提交按钮

type="submit"
注意按钮不书写name属性,仅仅书写value
表示按键上的文字
点击此按钮后,如果不违反验证规则,则表单
提交到action设置的目的地

<input type="submit" value="提交" >
取消按钮

type="reset"
点击此按钮后,所有填写的数据全部清空

<input type="reset" value="取消" >

用户注册案例


<!DOCTYPE html>
<html lang="zh-CN"><head>	<meta charset="UTF-8"><title>用户注册</title><body><center><div id="container"><header>	<h2>~用户注册~</h2>	<hr width="60%"></header><section><form action="suc.html" method="post"><label for="nameid">用户姓名:</label><input type="text" name="myname" id="nameid" required minlength="4"maxlength="8" placeholder="请输入用户姓名" autocomplete="off" autofocus><br><label for="passid">用户密码:</label><input type="password" name="mypass" id="passid" required autocomplete="off"maxlength="8" minlength="4" placeholder="请输入用户密码"><br><label>性别:</label><input type="radio" name="gender" value="0" checked /><input type="radio" name="gender" value="1" /><br><label>爱好:</label><input type="checkbox" name="hobby" value="soccer" />足球<input type="checkbox" name="hobby" value="running" />跑步<input type="checkbox" name="hobby" value="sleep" />睡觉<input type="checkbox" name="hobby" value="shopping" checked />购物<input type="checkbox" name="hobby" value="game" />游戏<br><label for="locationid">归属地:</label><select name="location" id="locationid"><option value="hubei">湖北</option><option value="guangdong">广东</option><option value="shandong" selected>山东</option><option value="sichuan">四川</option><option value="zhejiang">浙江</option></select><br><label for="upid">上传文件:</label><input type="file" name="up" id="upid" /><br><input type="hidden" name="thisiskey" value="thisisvalue" /><label for="emailid">输入邮箱:</label><input type="email" name="email" id="emailid"required /><br><label for="telid">输入电话:</label><input type="tel" name="tel" id="telid" required /><br><label for="dateid">出生日期:</label><input type="date" name="date" id="dateid" required /><br><label for="testid">考核成绩:</label><input type="number" name="number" id="testid" min="0"max="100" value="60" /><br>进度条:<meter max="100" min="0" value="60"></meter><br><label for="weiboid">您有什么新鲜事告诉大家:</label><textarea name="weibo" id="weiboid"cols="30" rows="5" required ></textarea><br><input type="submit" value="提交" ><input type="reset" value="取消" ></form></section><!--footer:h5新增标签,表示页脚,用来放置作者信息 网站版权 法律合作信息等--><footer><!--address:用来书写地址等信息--><address>我是页脚中的版权信息</address></footer></div></center></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人强化学习-双机械臂

概要 基于 robosuite 库&#xff0c;进行双臂机器人学习训练 环境测试 下面展示下分别控制两个机械手随机运动的画面&#xff1a; 双臂显示场景如下&#xff1a;双臂调用代码如下&#xff1a; import numpy as np import robosuite as suite import robomimic import rob…

【vue2】状态管理之 Vuex

文章目录 一、介绍1、概念 2、工作示意图3、安装4、简单示例 二、核心1、State1.1 组件中获取 Vuex 的状态1.2 mapState 辅助函数1.3 对象展开运算符 2、Getter2.1 基本使用2.2 通过属性访问2.3 通过方法访问2.4 mapGetters 辅助函数 3、Mutation3.1 定义 mutation3.2 commit 提…

Go的并发练习题目

经典并发题目 现在有4个协程&#xff0c;分别对应编号为1,2,3,4,每秒钟就有一个协程打印自己的编号&#xff0c;要求编写一个程序&#xff0c;让输出的编号总是按照1,2,3,4,1,2,3,4这样的规律一直打印下去 type Token struct { }func newWorker(id int, ch chan Token, nextC…

多线程排序(java版)

&#x1f4d1;前言 本文主要是【排序】——多线程排序的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&#x…

Docker-02-镜像项目部署

Docker-02-镜像&项目部署 文章目录 Docker-02-镜像&项目部署一、镜像①&#xff1a;镜像结构②&#xff1a;Dockerfile③&#xff1a;构建镜像01&#xff1a;构建02&#xff1a;查看镜像列表03&#xff1a;运行镜像 二、网络①&#xff1a;容器的网络IP地址②&#xff…

数据中心负载测试的常用工具和技术有哪些?

数据中心负载测试是评估系统在高负载下的性能和稳定性的重要手段。通过模拟大量用户并发访问&#xff0c;可以检测系统的瓶颈和潜在问题&#xff0c;为优化系统性能提供依据。以下是一些常用的数据中心负载测试工具和技术&#xff1a; Apache JMeter&#xff1a;JMeter是一个开…

《世界之外》提前开测,网易打响国乙大战

1月18日&#xff0c;国乙市场迎来了一场大战。 原定于1月26日开服的网易新乙游《世界之外》&#xff0c;突然宣布在1月18日进行不删档、不限量测试&#xff0c;从某种意义上来说&#xff0c;其实就等同于提前公测。 而同一天开服的还有叠纸的全新3D乙游《恋与深空》&#xff…

高通平台--使用错误密码连接AP后,出现CTRL-EVENT-ASSOC-REJECT后,无法cancle,导致UI界面看到一直connecting

问题现象: 在使用错误密码连接热点后,发现一直connecting,手机无法自动cancle,弹出密码错误提示框 Log分析: 发现一直频繁打印如下的log,这也就是无法cancle的原因 行 4337: 01-17 09:57:10.980 1906 1906 D wpa_supplicant: wlan0: Event ASSOC_REJECT (12) receiv…

基于R语言的NDVI的Sen-MK趋势检验

本实验拟分析艾比湖地区2010年至2020年间的NDVI数据&#xff0c;数据从MODIS遥感影像中提取的NDVI值&#xff0c;在GEE遥感云平台上将影像数据下载下来。代码如下&#xff1a; import ee import geemap geemap.set_proxy(port7890)# 设置全局网络代理 Map geemap.Map()# 指定…

2024年宜昌市中级职称评定条件能力业绩要求是什么?

1.参与完成 4 项中型以上工程建筑项目的勘察、设计&#xff0c;并通过审查 2.参与完成标准&#xff08;含国家标准、行业标准、地方标准、团体、标准&#xff09;、省级标准设计&#xff0c;参与工法、管理办法、规定、规程细则的编写&#xff0c;并正式发布实施 3.参与完成新技…

Gradle小知识点

subprojects 和 allprojects 的区别&#xff0c; 先给出结论&#xff1a; allprojects是对所有project的配置&#xff0c;包括Root Project&#xff1b; 而subprojects是对所有Child Project的配置。 新建一个test_gradle的文件夹&#xff0c;在文件夹里新建build.gradle和…

文件上传时报413错误

原因&#xff1a;nginx上传文件大小有限制&#xff0c;如果不配置nginx上传文件大小&#xff0c;则上传时会出现 413 (Request Entity Too Large) 异常&#xff08;请求实体过大&#xff09; 解决方案&#xff1a;1、打开nginx主配置文件nginx.conf&#xff0c;找到http{ }&…

go语言(三)----函数

1、函数单变量返回 package mainimport "fmt"func fool(a string,b int) int {fmt.Println("a ",a)fmt.Println("b ",b)c : 100return c}func main() {c : fool("abc",555)fmt.Println("c ",c)}2、函数多变量返回 pack…

PCA富集方法及聚类方法的生物学差异(自备)

对于解析肿瘤中的通路富集情况&#xff0c;我们可以使用PCA方法和聚类方法来评估基因表达谱。下面是对这两种方法的解释以及它们在生物学上的意义。 1. PCA方法&#xff1a; PCA&#xff08;Principal Component Analysis&#xff0c;主成分分析&#xff09;是一种降维技术&…

Shopee商品接口协议

Shopee是一家在线购物平台&#xff0c;提供多种商品的购买和销售服务。它成立于2015年&#xff0c;总部位于新加坡&#xff0c;目前已在东南亚地区和台湾等地开展业务。Shopee主要提供电子产品、家居用品、时尚服装、美妆产品等各类商品&#xff0c;用户可以通过Shopee的手机应…

【知识---c++中的条件运算符说明及使用】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言条件运算符&#xff08;ternary operator&#xff09;案例总结 前言 max_ind[k * OUTPUT_W j] 100 ? expect[k * OUTPUT_W j] 0 : expect[k * OUTPUT_W …

Pillow 报错module ‘PIL.Image’ has no attribute ‘LINEAR’

错误解决笔记。 原文链接&#xff1a;https://blog.csdn.net/qq_42773230/article/details/132736107 在运行代码期间&#xff0c;遇到了module ‘PIL.Image’ has no attribute ‘LINEAR’&#xff0c; 我安装的Pillow-10.0.2 解决办法&#xff1a;卸载Pillow pip uninst…

表的增删改查CURD(基础)

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;MySql&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 新增&#xff08;Create&#xff09; 全列插入 指定列…

Mybatis框架:入门

目录 一、前言 二、Mybatis基础 1. 下载和安装MyBatis 1.1 下载MyBatis 1.2 解压文件 2. 配置MyBatis的数据源 2.1 引入数据库驱动 2.2 配置数据源信息 3. 配置MyBatis的核心配置文件 3.1 指定映射文件路径 3.2 创建映射文件 三、MyBatis注解编程 1. 注解编程的基…

高校教务系统登录页面JS分析——河北地质大学

高校教务系统密码加密逻辑及JS逆向 本文将介绍高校教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习&#xff0c;勿用于非法用途。 一、密码加…