编程笔记 html5cssjs 025 HTML输入类型(1/2)

编程笔记 html5&css&js 025 HTML输入类型(1/2)

  • 输入类型:text
  • 输入类型:password
  • 输入类型:submit
  • 输入类型: radio
  • 输入类型: checkbox
  • 输入类型: button
  • HTML5 输入类型
  • 输入类型:number

本节介绍HTML输入类型。也就是<input> 元素type属性的可以使用的值。这在桌面程序中是通过不同的控件实现的。这里初步体现了类型、属性等软件设计方法。

输入类型:text

<input type="text"> 定义供文本输入的单行输入字段:

<form>First name:<br>
<input type="text" name="firstname">
<br>Last name:<br>
<input type="text" name="lastname">
</form> 

输入类型:password

<input type="password"> 定义密码字段:

<form>User name:<br>
<input type="text" name="username">
<br>User password:<br>
<input type="password" name="psw">
</form> 

注释:password 字段中的字符会被做掩码处理(显示为星号或实心圆)。

输入类型:submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序(form-handler):

<form action="action.js">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

如果您省略了提交按钮的 value 属性,那么该按钮将获得默认文本:

<form action="action.js">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form> 

输入类型: radio

<input type="radio"> 定义单选按钮。
Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

输入类型: checkbox

<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 

输入类型: button

<input type="button> 定义按钮。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 输入类型

HTML5 增加了多个新的输入类型:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。

输入类型:number

<input type="number"> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持,限制可应用到输入字段。

<form>Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">
</form>

输入限制
这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读(无法修改)。
required	规定输入字段是必需的(必需填写)。
size	规定输入字段的宽度(以字符计)。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。
<form>Quantity:<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

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

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

相关文章

C# .Net学习笔记—— 异步和多线程(await/async)

一、介绍 1、控制台测试await/async 2、C# 5.0 .Net framework4.5 CLR4.0 以后才有&#xff0c;本身是一种语法糖 二、基本测试 1、不加await测试。 private async static Task TestAsync() {Log.Info($"当前主线程id{Thread.CurrentThread.ManagedThreadId}"…

LabVIEW在高级结构监测中的创新应用

LabVIEW在高级结构监测中的创新应用 LabVIEW作为一个强大的系统设计平台&#xff0c;其在基于BOTDA&#xff08;光时域反射分析&#xff09;技术的结构监测中发挥着核心作用。利用LabVIEW的高效数据处理能力和友好的用户界面&#xff0c;开发了一个先进的监测系统。该系统专门…

第P9周:YOLOv5-Backbone模块实现

一、 前期准备 1. 设置GPU 我的是笔记本电脑&#xff0c;没有GPU import torch import torch.nn as nn import torchvision.transforms as transforms import torchvision from torchvision import transforms, datasets import os,PIL,pathlib,warningswarnings.filterwarni…

OpenSSL provider

提供者 标准提供者默认提供者传统提供者FIPS 提供者基本提供者空提供者加载提供者 标准提供者 提供者是算法实现的容器。每当通过高级别 API 使用加密算法时&#xff0c;都会选择一个提供者。实际上是由该提供者实现执行所需的工作。OpenSSL 自带了五个提供者。在未来&#…

视频智能分析/云存储平台EasyCVR接入海康SDK,通道名称未自动更新该如何解决?

视频监控GB28181平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能…

Oracle-存储过程

简介 存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集&#xff0c;它大大提高了SQL语句的功能和灵活性。存储过程编译后存储在数据库中&#xff0c;所以执行存储过程比执行存储过程中封装的SQL语句更有效率。 语法 存储过程: 一组为了完成某种特定功能的sql语句…

Protobuf 编码结构

编码结构 什么是protobuf protocol buffers 是一种语言无关、平台无关、可扩展的序列化结构数据的方法&#xff0c;可用于数据通信协议和数据存储等&#xff0c;它是 Google 提供的一个具有高效协议数据交换格式工具库&#xff0c;是一种灵活、高效和自动化机制的结构数据序列…

MySQL-数据库概述

数据库相关概念&#xff1a; 数据库(DateBase)简称DB,就是一个存储数据的仓库&#xff0c;数据有组织的进行存储。 数据库分为关系型数据库简称RDBMS和非关系型数据库 关系型数据库简称RDBMS:建立在关系模型的基础上&#xff0c;由多张相互连接的二维表组成的数据库.简单来说…

Nginx(十七) 日志轮询/切割

1.编写shell脚本 Nginx_Log_Path"/usr/local/nginx/logs/" Dateformat$(date -d "yesterday" %Y%m%d) mv ${Nginx_Log_Path}/access.log ${Nginx_Log_Path}/access-${Dateformat}.log mv ${Nginx_Log_Path}/access_8688.log ${Nginx_Log_Path}/access_868…

【Linux软件包管理器】yum详解

目录 1、什么是软件包 2、yum的操作 1&#xff09;yum源 2&#xff09;三板斧 ① yum list ② yum install [软键名] ③ yum remove [软件名] 1、什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了,…

除了sd webui,compfy还有一个sd UI

GitHub - VoltaML/voltaML-fast-stable-diffusion: Beautiful and Easy to use Stable Diffusion WebUI

国科大图像处理2024速通期末——汇总2017-2019、2023回忆

国科大2023.12.28图像处理0854期末重点 图像处理 王伟强 作业 课件 资料 一、填空 一个阴极射线管它的输入与输出满足 s r 2 sr^{2} sr2&#xff0c;这将使得显示系统产生比希望的效果更暗的图像&#xff0c;此时伽马校正通常在信号进入显示器前被进行预处理&#xff0c;令p…

Unity之键盘鼠标的监控

小编最近在玩大表哥2&#xff0c;通过 W、A、S、D 来移动亚瑟&#xff0c;鼠标左键来不吃牛肉 我们都知道玩家通过按键鼠标来控制游戏人物做出相应的行为动作&#xff0c;那在Unity引擎里是怎么知道玩家是如何操作的呢&#xff1f;本篇来介绍Unity是怎样监控键盘和鼠标的。 首先…

fatal: Need to specify how to reconcile divergent branches.如何处理

错误信息 “fatal: Need to specify how to reconcile divergent branches.” 通常在尝试推送到远程仓库时出现&#xff0c;尤其是当本地分支和远程分支有分歧&#xff08;即它们各自有一些不同的提交&#xff09;时。处理这个问题通常涉及合并&#xff08;merge&#xff09;或…

计算机网络期末知识汇总

一、计算机网络概述 1.Internet 的中文译名并不统一。 现有的 Internet 译名有两种&#xff1a; 因特网&#xff0c;这个译名是全国科学技术名词审定委员会推荐的&#xff0c;但却长期未得 到推广&#xff1b; 互联网&#xff0c;这是目前流行最广的、事实上的标准译名。现…

spring常用注解(三)springbean类

一、Service用于标注业务层组件、 二、Repository用于标注数据访问组件&#xff0c;即DAO组件。 三、Component泛指组件&#xff0c;当组件不好归类的时候&#xff0c;我们可以使用这个注解进行标注。&#xff08;pojo&#xff09; 四、Scope用于指定scope作用域的&#xff…

Node.js + Mysql 防止sql注入的写法

关键代码 const queryString SELECT * FROM sys_user LIMIT ?, ?;let data await query(queryString, [startIndex,pageSize]); 访问数据库相关代码 const mysql require(mysql)const pool mysql.createPool({host: 127.0.0.1,user: root,password: 123456,database:…

【C语言】静动态内存的跨函数访问malloc、free

目录 多指针初认识&#xff1a;动态内存和多级指针的跨函数访问动态内存和静态内存的比较&#xff1a;静态内存不可以跨函数访问&#xff1a;动态内存跨函数访问&#xff1a;malloc和free示例 多指针初认识&#xff1a; #include <stdio.h> #include <stdlib.h> in…

技术查漏补缺(1)Logback

一、下定义&#xff1a;Logback是一个开源的日志组件 二、Logback的maven <!--这个依赖直接包含了 logback-core 以及 slf4j-api的依赖--> <dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><v…

新手解锁语言之力:理解 PyTorch 中 Transformer 组件

目录 torch.nn子模块transformer详解 nn.Transformer Transformer 类描述 Transformer 类的功能和作用 Transformer 类的参数 forward 方法 参数 输出 示例代码 注意事项 nn.TransformerEncoder TransformerEncoder 类描述 TransformerEncoder 类的功能和作用 Tr…