表单标记(html)

前言

发现input的type属性还是有挺多的,这里把一些常用的总结一下。

HTML 输入类型 (w3school.com.cn)icon-default.png?t=N7T8https://www.w3school.com.cn/html/html_form_input_types.asp

text-文本

文本输入,如果文字太长,超出的部分就不会显示。

定义供文本输入的单行输入字段

姓名:<input type="text" name="name">

password-密码

密码,会用实心的小圆点代替输入的字符。

定义密码字段

密码:<input type="password" name="password">

radio- 收音机

单选按钮,用checked="checked"默认选中“男”,用label增大他的命中范围,使得点击字符“男”或“女”可以达到选中单选按钮的效果,同时通过name属性使得两个是一组,两者同时只能有一个被选中。

定义单选按钮

性别:<label><input type="radio" name="gender" value="1" checked="checked">男</label><label><input type="radio" name="gender" value="2">女</label>

 

checkbox- 复选框

和单选按钮不同的是,可以同时选中几个,同样使用label标签来增大命中的范围。

定义复选框

爱好:<label><input type="checkbox" name="hobby" value="ppq">乒乓球</label><label><input type="checkbox" name="hobby" value="lq">篮球</label><label><input type="checkbox" name="hobby" value="zq">足球</label>

 file-文件夹

可以上传计算机上面的文件,图片。

图像:<input type="file" name="image">

date- 日期

选择日期。

用于应该包含日期的输入字段

生日:<input type="date" name="birthday">

 

time- 时间

选择时间。

允许用户选择时间(无时区)

 时间:<input type="time" name="time">

datetime-local-本地时间 

选择日期和时间。

允许用于选择日期和时间(无时区),datetime是有时区

日期时间:<input type="datetime-local" name="datetime">

 

email-电子邮件

文本输入要符合电子邮件地址的规范。

用于应该包含电子邮件地址的输入字段

邮箱;<input type="email" name="email"><input type="submit" value="提交">

number- 数字

只能输入数字字符,且右边可以自增自减。

用于应该包含数字值的输入字段

年龄:<input type="number" name="age">

属性描述
disabled规定输入字段应该被禁用
max规定输入字段的最大值
maxlength规定输入字段的最大字符数
min规定输入字段的最小值
pattern规定通过其检查输入值的正则表达式
readonly规定输入字段为只读(无法修改)
required规定输入字段是必需的(必需填写)
size规定输入字段的宽度(以字符计)
step规定输入字段的合法数字间隔
value规定输入字段的默认值

select- 选择

下拉列表,通过selected默认选中。

学历:<select name="degree"><option value="1">初中</option><option value="2">高中</option><option value="3">大专</option><option value="4" selected="selected">本科</option><option value="5">硕士</option><option value="6">博士</option></select>

 

textarea-多行文本输入区

文本域, cols列,rows行。

 描述:<textarea name="description" cols="30" rows="10"></textarea>

button-按钮 

之后可以结合js来使用。

<input type="button" value="按钮">

reset-重置

把表单写的内容和清空,重新填写。

<input type="reset" value="重置">

submit-提交

把表单的信息post。

<input type="submit" value="提交">

总结

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head><body><form action="" method="post">姓名:<input type="text" name="name"><br><br>密码:<input type="password" name="password"><br><br>性别:<label><input type="radio" name="gender" value="1" checked="checked">男</label><label><input type="radio" name="gender" value="2">女</label><br><br>爱好:<label><input type="checkbox" name="hobby" value="ppq">乒乓球</label><label><input type="checkbox" name="hobby" value="lq">篮球</label><label><input type="checkbox" name="hobby" value="zq">足球</label><br><br>图像:<input type="file" name="image"><br><br>生日:<input type="date" name="birthday"><br><br>时间:<input type="time" name="time"><br><br>日期时间:<input type="datetime-local" name="datetime"><br><br>邮箱;<input type="email" name="email"><br><br>年龄:<input type="number" name="age"><br><br>学历:<select name="degree"><option value="1">初中</option><option value="2">高中</option><option value="3">大专</option><option value="4" selected="selected">本科</option><option value="5">硕士</option><option value="6">博士</option></select><br><br>描述:<textarea name="description" cols="30" rows="10"></textarea><br><br><input type="hidden" name="id" value="1"><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body></html>

这个日期属性我之前还用的是下拉框,没想到有date属性,比用select要方便一点。

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

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

相关文章

Stability AI一种新型随心所欲生成不同音调、口音、语气的文本到语音(TTS)音频模型

该模型无需提前录制人声样本作为参考&#xff0c;仅凭文字描述就能生成所需的声音特征。用户只需描述他们想要的声音特点&#xff0c;例如“一个语速较快、带有英国口音的女声”&#xff0c;模型即可相应地生成符合要求的语音。它不仅能模仿已有的声音&#xff0c;还能根据用户…

Mac使用AccessClient打开Linux堡垒机跳转闪退问题解决

登录公司的服务器需要使用到堡垒机&#xff0c;但是mac使用AccessClient登录会出现问题 最基础的AccessClient配置 AccessClient启动需要设置目录权限&#xff0c;可以直接设置为 权限 777 chmod 777 /Applications/AccessClient.app注: 如果不是这个路径,可以打开终端,将访达中…

OJ刷题:求俩个数组的交集(没学哈希表?快排双指针轻松搞定!)

目录 ​编辑 1.题目描述 2.C语言中的内置排序函数&#xff08;qsort&#xff09; 3.解题思路 3.1 升序 3.2双指针的移动 3.3 保证加入元素的唯一性 4.leetcode上的完整代码 完结散花 悟已往之不谏&#xff0c;知来者犹可追 …

新增C++max函数的使用

在 C 中&#xff0c;max函数是标准库中的一个函数&#xff0c;用于返回两个或多个元素中的最大值。max函数的声明如下&#xff1a; cpp #include <algorithm>template<class T> const T& max(const T& a, const T& b);这个函数接受两个同类型的参数a…

UML 2.5图形库

UML 2.5图形库 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能&#xff0c;并实现了云端存储&#…

UnityShader:直接光照效果/点光/平行光阴影

效果&#xff1a; 代码&#xff1a; Shader "MyShader/PhongNormal" {Properties{_DiffuseTex("漫反射贴图",2d)"white"{}_AOTex("AO贴图",2d)"white"{}_SpecularMask("高光遮罩",2d)"white"{}_Normal…

大模型实战营第二期——2. 浦语大模型趣味Demo

文章目录 1. 大模型及InternLM模型介绍2. InternLM-Chat-7B智能对话Demo2.1 基本说明2.2 实际操作2.2.1 创建开发机2.2.2 conda环境配置2.2.3 模型下载2.2.4 InternLM代码库下载和修改2.2.5 cli运行2.2.6 web_demo运行 3. Lagent智能体工具调用Demo3.1 基本说明3.2 实际操作3.2…

商业智能(BI)数据分析、挖掘概念

商业智能&#xff08;BI&#xff09;数据分析挖掘概念 一、商业智能&#xff08;BI&#xff09;数据分析挖掘概念 数据挖掘目前在各类企业和机构中蓬勃发展。因此我们制作了一份此领域常见术语总结。 1.分析型客户关系管理&#xff08;Analytical CRM/aCRM 用于支持决策&…

nodeJS 的 npm 设置国内高速镜像之淘宝镜像的方法

1、我们知道 nodeJS 是老外搞出来的&#xff0c;服务器放在了国外&#xff0c;国内的小朋友访问起来会比较慢&#xff0c;阿里巴巴的淘宝给出了有力支持&#xff0c;现在我们就将 nodeJS 的镜像地址切换为国内的淘宝镜像。 2、查看当前的镜像地址&#xff1a; npm get registr…

数据库管理-第147期 最强Oracle监控EMCC深入使用-04(20240207)

数据库管理147期 2024-02-07 数据库管理-第147期 最强Oracle监控EMCC深入使用-04&#xff08;20240207&#xff09;1 发现Exadata2 Exadata监控计算节点&#xff1a;存储节点RoCE交换机管理交换机PDU 总结 数据库管理-第147期 最强Oracle监控EMCC深入使用-04&#xff08;202402…

JavaScript 入门 完整版

目录 第一个知识点&#xff1a;引入js文件 内部引用: 外部引用: 第二个知识点&#xff1a;javascript的基本语法 定义变量&#xff1a; 条件控制(if - else if - else) 第三个知识点&#xff1a;javascript里的数据类型、运算符&#xff1a; 数字类型 字符串类型 布尔…

用HTML5实现灯笼效果

本文介绍了两种实现效果&#xff1a;一种使用画布&#xff08;canvas&#xff09;标签/元素&#xff0c;另一种不用画布&#xff08;canvas&#xff09;标签/元素主要使用CSS实现。 使用画布&#xff08;canvas&#xff09;标签/元素实现&#xff0c;下面&#xff0c;在画布上…

机器学习 | 深入集成学习的精髓及实战技巧挑战

目录 xgboost算法简介 泰坦尼克号乘客生存预测(实操) lightGBM算法简介 《绝地求生》玩家排名预测(实操) xgboost算法简介 XGBoost全名叫极端梯度提升树&#xff0c;XGBoost是集成学习方法的王牌&#xff0c;在Kaggle数据挖掘比赛中&#xff0c;大部分获胜者用了XGBoost。…

【代码随想录26】332.重新安排行程 51.N皇后 37.解数独

目录 332.重新安排行程题目描述参考代码 51.N皇后题目描述参考代码 37.解数独题目描述参考代码 332.重新安排行程 题目描述 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机…

JRebel激活-nginx版本

nginx转发流量&#xff08;代替其他网上说的那个工具&#xff09; proxy_pass http://idea.lanyus.com; 工具激活 填写内容说明&#xff1a; 第一行的激活网址是&#xff1a;http://127.0.0.1:8888/ 正确的GUID。GUID 可以通过专门的网站来生成&#xff08;点击打开&#…

kettle控件-复制记录到结果/ 从结果获取记录的使用

在数据采集过程中&#xff0c;遇到对方数据传送不及时的情况&#xff0c;导致数据漏采集&#xff0c;需要手工反复补采。为了解决这一问题&#xff0c;可以利用kettle的复制记录到结果/从结果获取记录控件。 job的整个流程如下&#xff1a; 设置变量&#xff1a; 创建目录: ge…

STM32输出PWM波控制180°舵机

时间记录&#xff1a;2024/2/8 一、PWM介绍 &#xff08;1&#xff09;脉冲宽度调制 &#xff08;2&#xff09;占空比&#xff1a;高电平时间占整个周期时间的比例 &#xff08;3&#xff09;STM32通过定时器实现PWM时具有两种模式 PWM1模式&#xff1a;向上计数模式下&…

软件测试工程师——缺陷(一篇足以)

目录 定义 缺陷的类型 缺陷的严重程度 缺陷的状态 缺陷的根源 ​缺陷的来源 缺陷的起源 缺陷的生命周期 缺陷的识别 缺陷报告模板 编写缺陷报告的目的 缺陷报告编写的准则 缺陷描述的准则 定义 1. 软件未实现产品说明书中所提及的功能 2. 软件实现了产品说明书中…

echarts图表插件

图表组件 ECharts&#xff0c;全称为Enterprise Charts&#xff0c;是一个使用JavaScript实现的开源可视化库。它主要用于数据可视化领域&#xff0c;能够方便地创建出直观、交互性强的图表。ECharts由百度团队开发&#xff0c;目前是Apache的顶级项目之一。ECharts支持的图表…

JVM调优(Window下)

1、编写代码&#xff0c;像下面代码这样&#xff0c;产生OOM&#xff0c; private static final Integer K 1024;/*** 死循环&#xff0c;验证JVM调优* return*/GetMapping(value "/deadLoop")public void deadLoop(){int size K * K * 8;List<byte[]> lis…