表单标记(html)

news2024/11/13 1:45:15

前言

发现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.coloradmin.cn/o/1441370.html

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

相关文章

C语言操作符超详细总结

文章目录 1. 操作符的分类2. 二进制和进制转换2.1 2进制转10进制2.1.1 10进制转2进制数字 2.2 2进制转8进制和16进制2.2.1 2进制转8进制2.2.2 2进制转16进制 3. 原码、反码、补码4.移位操作符4.1 左移操作符4.2 右移操作符 5. 位操作符&#xff1a;&、|、^、~6. 逗号表达式…

vue3 之 通用组件统一注册全局

components/index.js // 把components中的所组件都进行全局化注册 // 通过插件的方式 import ImageView from ./ImageView/index.vue import Sku from ./XtxSku/index.vue export const componentPlugin {install (app) {// app.component(组件名字&#xff0c;组件配置对象)…

图解 V8 执行 JS 的过程

本文来分享 V8 引擎执行 JavaScript 的过程 1. JS 代码执行过程 在说V8的执行JavaScript代码的机制之前&#xff0c;我们先来看看编译型和解释型语言的区别。 编译型语言和解释型语言 我们知道&#xff0c;机器是不能直接理解代码的。所以&#xff0c;在执行程序之前&#xf…

Java_栈_队列

文章目录 一、栈&#xff08;Stack&#xff09;1.概念2.栈的使用3.栈的模拟实现1、定义接口2、定义栈3、成员4、构造方法5、判断空间是否满 full6、入栈 push7、出栈 pop8、获取栈顶元素 peek9、获取栈中有效元素个数 size10、检测栈是否为空 empty完整代码 4.练习1、有效括号2…

GEE Colab——如何利用Matplotlib在colab中进行图形制作

在colab中绘制图表 笔记本的一个常见用途是使用图表进行数据可视化。Colaboratory 提供多种图表工具作为 Python 导入,让这一工作变得简单。 Matplotlib Matplotlib 是最常用的图表工具包,详情请查看其文档,并通过示例获得灵感。 线性图 线性图是一种常见的图表类型,用…

LabVIEW网络测控系统

LabVIEW网络测控系统 介绍了基于LabVIEW的网络测控系统的开发与应用&#xff0c;通过网络技术实现了远程的数据采集、监控和控制。系统采用LabVIEW软件与网络通信技术相结合&#xff0c;提高了系统的灵活性和扩展性&#xff0c;适用于各种工业和科研领域的远程测控需求。 随着…

哈希表(Hash Table)-----运用实例【通过哈希表来管理雇员信息】(java详解) (✧∇✧)

目录 一.哈希表简介&#xff1a; 实例介绍&#xff1a; 类的创建与说明&#xff1a; 各功能图示&#xff1a; 1.class HashTab{ }; 2. class EmpLinkedList{ }&#xff1b; 3. class Emp{ }&#xff1b; 4.测试&#xff1a; 运行结果&#xff1a; 最后&#xff0c;完整…

springboot微信小程序uniapp学习计划与日程管理系统

基于springboot学习计划与日程管理系统&#xff0c;确定学习计划小程序的目标&#xff0c;明确用户需求&#xff0c;学习计划小程序的主要功能是帮助用户制定学习计划&#xff0c;并跟踪学习进度。页面设计主要包括主页、计划学习页、个人中心页等&#xff0c;然后用户可以利用…

Java汽车销售管理

技术架构&#xff1a; springboot mybatis Mysql5.7 vue2 npm node 有需要该项目的小伙伴可以私信我你的Q。 功能描述&#xff1a; 针对汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、财务报表等功能&#xff0c;提供经理和销售两种角色进行管理 效果图&…

CTF--Web安全--SQL注入之‘绕过方法’

一、什么是绕过注入 众所周知&#xff0c;SQL注入是利用源码中的漏洞进行注入的&#xff0c;但是有攻击手段&#xff0c;就会有防御手段。很多题目和网站会在源码中设置反SQL注入的机制。SQL注入中常用的命令&#xff0c;符号&#xff0c;甚至空格&#xff0c;会在反SQL机制中…

预测模型:MATLAB线性回归

1. 线性回归模型的基本原理 线性回归是统计学中用来预测连续变量之间关系的一种方法。它假设变量之间存在线性关系&#xff0c;可以通过一个或多个自变量&#xff08;预测变量&#xff09;来预测因变量&#xff08;响应变量&#xff09;的值。基本的线性回归模型可以表示为&…

Ps:窗口排列

Ps菜单&#xff1a;窗口/排列 Window/Arrange Photoshop 的“窗口/排列” Arrange子菜单中提供了多种方式来组织和查看打开的文档窗口&#xff0c;这在处理多个文档或比较图像时非常有用。 ◆ ◆ ◆ 常用操作方法与技巧 1、同文档双窗口处理法 将同一个图像显示在两个窗口中&…

The Back-And-Forth Method (BFM) for Wasserstein Gradient Flows windows安装

本文记录了BFM算法代码在windows上的安装过程。 算法原网站&#xff1a;https://wasserstein-gradient-flows.netlify.app/ github&#xff1a;https://github.com/wonjunee/wgfBFMcodes 文章目录 FFTWwgfBFMcodesMATLABpython注 FFTW 官网/下载路径&#xff1a;https://ww…

备战蓝桥杯---动态规划(基础2)

本专题主要是介绍几个比较经典的题目&#xff1a; 假设我们令f[i]为前i个的最长不下降子序列&#xff0c;我们会发现难以转移方程很难写&#xff08;因为我们不知道最后一个数&#xff09;。 于是&#xff0c;我们令f[i]为以i结尾的最长不下降子序列&#xff0c;这样子我们就可…

Java基础知识练习题

1.对Java源文件进行编译操作的命令是&#xff08;B&#xff09; A.Java B.javac C.where is java D.javaw 2.下列命令中&#xff0c;用来运行Java程序的是&#xff08;A&#xff09;A.java B. javadoc C. jar D. javac 分析&#xff1a; 对Java源程序进行编译的命令是J…

Django的配置文件setting.py

BASE_DIR 项目路径&#xff1a;默认是已经打开的主项目路径 ​​​​​​​BASE_DIR os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY 密钥 SECRET_KEY (dh&_fm2hfn9y)35!_6#$a7q%%^onoy#-a8x18r4(6*8f(aniDEBUG 帮助调试&#xff0c;默认…

gcore服务器设置root账号密码登录

这个厂商很奇怪&#xff0c;默认只能用centos用户与公钥登录&#xff0c;但是这样有时候很麻烦。 他默认开启了SELinux&#xff0c;和强制ssh密钥登录。 下面所有操作在root模式下进行 SELinux设置为兼容模式 setenforce 0vi /etc/selinux/config然后将文件中的SELINUXenfo…

JVM之GC垃圾回收

GC垃圾回收 如何判断对象可以回收 引用计数法 如果有对象引用计数加一&#xff0c;没有对象引用&#xff0c;计数减一&#xff0c;如果计数为零&#xff0c;则回收 但是如果存在循环引用&#xff0c;即A对象引用B对象&#xff0c;B对象引用A对象&#xff0c;会造成内存泄漏 可…

Java 学习和实践笔记(3)

安装和配置成功&#xff1a; 运行第一个程序时出现这个错误&#xff1a;javac不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 找到这篇文章看了下&#xff1a;javac 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。_javac 不是内部或外部…

安卓服务的常见问题,性能优化以及应用场景剖析

一、引言 在安卓开发中&#xff0c;服务&#xff08;Service&#xff09;扮演着至关重要的角色&#xff0c;它们在没有用户界面的情况下&#xff0c;为用户提供了长时间的后台任务执行能力。本文将探讨服务常见问题、优化策略、应用场景以及开发过程中应注意的事项。 二、应用场…