6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记08-form表单元素03-input

2022-04-15 1 20 web前端社区

6.jpg 0 前端程序猿

input

简介

<input>标签是一个行内元素,用来接收用户的输入。它是一个单独使用的标签,没有结束标志。

它有多种类型,取决于type属性的值,默认值是text,表示一个输入框。

  1. <input>
  2. <!-- 等同于 -->
  3. <input type="text">

上面代码会生成一个单行的输入框,用户可以在里面输入文本。

<input>的属性非常多,有些属性是某个类型专用的,放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。

  • autofocus:布尔属性,是否在页面加载时自动获得焦点。
  • disabled:布尔属性,是否禁用该控件。一旦设置,该控件将变灰,用户可以看到,但是无法操作。
  • form:关联表单的id属性。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在<form>内部。
  • list:关联的<datalist>id属性,设置该控件相关的数据列表,详见后文。
  • name:控件的名称,主要用于向服务器提交数据时,控件键值对的键名。注意,只有设置了name属性的控件,才会向服务器提交,不设置就不会提交。
  • readonly:布尔属性,是否为只读。
  • required:布尔属性,是否为必填。
  • type:控件类型,详见下文。
  • value:控件的值。

类型

type属性决定了<input>的形式。该属性可以取以下值。

text

type="text"是普通的文本输入框,用来输入单行文本。如果用户输入换行符,换行符会自动从输入中删除。

  1. <input type="text" id="name" name="name" required
  2. minlength="4" maxlength="8" size="10">

text输入框有以下配套属性。

  • maxlength:可以输入的最大字符数,值为一个非负整数。
  • minlength:可以输入的最小字符数,值为一个非负整数,且必须小于maxlength
  • pattern:用户输入必须匹配的正则表达式,比如要求用户输入4个~8个英文字符,可以写成pattern="[a-z]{4,8}"。如果用户输入不符合要求,浏览器会弹出提示,不会提交表单。
  • placeholder:输入字段为空时,用于提示的示例值。只要用户没有任何字符,该提示就会出现,否则会消失。
  • readonly:布尔属性,表示该输入框是只读的,用户只能看,不能输入。
  • size:表示输入框的显示长度有多少个字符宽,它的值是一个正整数,默认等于20。超过这个数字的字符,必须移动光标才能看到。
  • spellcheck:是否对用户输入启用拼写检查,可能的值为truefalse

type="search"是一个用于搜索的文本输入框,基本等同于type="text"。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。

下面是一个例子。

  1. <form>
  2. <input type="search" id="mySearch" name="q"
  3. placeholder="输入搜索词……" required>
  4. <input type="submit" value="搜索">
  5. </form>

button

type="button"是没有默认行为的按钮,通常脚本指定click事件的监听函数来使用。

  1. <input type="button" value="点击">

建议尽量不使用这个类型,而使用<button>标签代替,一则语义更清晰,二则<button>标签内部可以插入图片或其他 HTML 代码。

submit

type="submit"是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器。

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

如果不指定value属性,浏览器会在提交按钮上显示默认的文字,通常是Submit

该类型有以下配套属性,用来覆盖<form>标签的相应设置。

  • formaction:提交表单数据的服务器 URL。
  • formenctype:表单数据的编码类型。
  • formmethod:提交表单使用的 HTTP 方法(getpost)。
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示。

reset

type="reset"是一个重置按钮,用户点击以后,所有表格控件重置为初始值。

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

如果不设置value属性,浏览器会在按钮上面加上默认文字,通常是Reset

这个控件用处不大,用户点错了还会使得所有已经输入的值都被重置,建议不要使用。

password

type="password"是一个密码输入框。用户的输入会被遮挡,字符通常显示星号(*)或点(·)。

  1. <input type="password" id="pass" name="password"
  2. minlength="8" required>

浏览器对该类型输入框的显示,会有所差异。一种常见的处理方法是,用户每输入一个字符,先在输入框里面显示一秒钟,然后再遮挡该字符。

如果用户输入内容包含换行符(U+000A)和回车符(U+000D),浏览器会自动将这两个字符过滤掉。

该类型的配套属性如下。

  • maxlength:可以输入的最大字符数。
  • minlength:可以输入的最少字符数。
  • pattern:输入必须匹配的正则表达式。
  • placeholder:输入为空时的显示文本。
  • readonly:布尔属性,该输入框是否只读。
  • size:一个非负整数,表示输入框的显示长度为多少个字符。
  • autocomplete:是否允许自动填充,可能的值有on(允许自动填充)、off(不允许自动填充)、current-password(填入当前网站保存的密码)、new-password(自动生成一个随机密码)。
  • inputmode:允许用户输入的数据类型,可能的值有none(不使用系统输入法)、text(标准文本输入)、decimal(数字,包含小数)、numeric(数字0-9)等。

file

type="file"是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。

  1. <input type="file"
  2. id="avatar" name="avatar"
  3. accept="image/png, image/jpeg">

该类型有以下属性。

  • accept:允许选择的文件类型,使用逗号分隔,可以使用 MIME 类型(比如image/jpeg),也可以使用后缀名(比如.doc),还可以使用audio/*(任何音频文件)、video/*(任何视频文件)、image/*(任何图像文件)等表示法。
  • capture:用于捕获图像或视频数据的源,可能的值有user(面向用户的摄像头或麦克风),environment(外接的摄像头或麦克风)。
  • multiple:布尔属性,是否允许用户选择多个文件。

hidden

type="hidden"是一个不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息。比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交。

  1. <input id="prodId" name="prodId" type="hidden" value="xm234jq">

上面这个控件,页面上是看不见的。用户提交表单的时候,浏览器会将prodId=xm234jq发给服务器。

number

type="number"是一个数字输入框,只能输入数字。浏览器通常会在输入框的最右侧,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减。

  1. <input type="number" id="tentacles" name="tentacles"
  2. min="10" max="100">

上面代码指定数字输入框,最小可以输入10,最大可以输入100。

该类型可以接受任何数值,包括小数和整数。可以通过step属性,限定只接受整数。

该类型有以下配套属性。

  • max:允许输入的最大数值。
  • min:允许输入的最小数值。
  • placeholder:用户输入为空时,显示的示例值。
  • readonly:布尔属性,表示该控件是否为只读。
  • step:点击向上和向下箭头时,数值每次递减的步长值。如果用户输入的值,不符合步长值的设定,浏览器会自动四舍五入到最近似的值。默认的步长值是1,如果初始的value属性设为1.5,那么点击向上箭头得到2.5,点击向下箭头得到0.5
1

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3