编程笔记 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>


相关文章
|
6天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
6天前
|
存储 数据安全/隐私保护
html的输入框类型
html的输入框类型
15 1
|
6天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
6天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
6天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
23 1
|
6天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
6天前
|
JavaScript 前端开发
在JavaScript中怎样获取或修改HTML元素。
在JavaScript中怎样获取或修改HTML元素。
|
6天前
|
前端开发 JavaScript
JavaScript 获取 HTML 元素
JavaScript 获取 HTML 元素
|
6天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
34 10
|
6天前
base64 excel类型base64转html在线显示
base64 excel类型base64转html在线显示
18 0