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

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


本节介绍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>

练习

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>编程笔记 html5&css&js html表单 登录</title>
        <meta charset="utf-8" />
        <link href="css/style025.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="mr-cont">
            <form>
                <!--使用label标签绑定单行文本框,实现单击图片时文本框也能获取焦点-->
                <label>
                    <img src="images/025user.png" />
                    <input type="text" />
                </label>
                <!--密码输入框-->
                <label>
                    <img src="images/025user.png" />
                    <input type="password" />
                </label>
            </form>
        </div>
    </body>
</html>


目录
打赏
0
2
2
0
28
分享
相关文章
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
javascript挑战编程技能-第八题:99乘法表
javascript挑战编程技能-第八题:99乘法表
237 0
javascript挑战编程技能-第八题:99乘法表
javascript挑战编程技能-第六题:检查密码强度
javascript挑战编程技能-第六题:检查密码强度
306 0
javascript挑战编程技能-第六题:检查密码强度

热门文章

最新文章

AI助理
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问

你好,我是AI助理

可以解答问题、推荐解决方案等