6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

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

2022-04-15 0 61 web前端社区

6.jpg 0 前端程序猿

checkbox

type="checkbox"是复选框,允许选择或取消选择该选项。

  1. <input type="checkbox" id="agreement" name="agreement" checked>
  2. <label for="agreement">是否同意</label>

上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,checked属性表示默认选中。

value属性的默认值是on。也就是说,如果没有设置value属性,以上例来说,选中复选框时,会提交agreement=on。如果没有选中,提交时不会有该项。

多个相关的复选框,可以放在<fieldset>里面。

  1. <fieldset>
  2. <legend>你的兴趣</legend>
  3. <div>
  4. <input type="checkbox" id="coding" name="interest" value="coding">
  5. <label for="coding">编码</label>
  6. </div>
  7. <div>
  8. <input type="checkbox" id="music" name="interest" value="music">
  9. <label for="music">音乐</label>
  10. </div>
  11. </fieldset>

上面代码中,如果用户同时选中两个复选框,提交的时候就会有两个name属性,比如interest=coding&interest=music

radio

type="radio"是单选框,表示一组选择之中,只能选中一项。单选框通常为一个小圆圈,选中时会被填充或突出显示。

  1. <fieldset>
  2. <legend>性别</legend>
  3. <div>
  4. <input type="radio" id="male" name="gender" value="male">
  5. <label for="male"></label>
  6. </div>
  7. <div>
  8. <input type="radio" id="female" name="gender" value="female">
  9. <label for="female"></label>
  10. </div>
  11. </fieldset>

上面代码中,性别只能在两个选项之中,选择一项。

注意,多个单选框的name属性的值,应该都是一致的。提交到服务器的就是选中的那个值。

该类型的配套属性如下。

  • checked:布尔属性,表示是否默认选中当前项。
  • value:用户选中该项时,提交到服务器的值,默认为on

email

type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。

  1. <input type="email" pattern=".+@foobar.com" size="30" required>

上面代码会生成一个必填的文本框,只能输入后缀为foobar.com的邮箱地址。

该类型有一个multiple的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。

  1. <input id="emailAddress" type="email" multiple required>

注意,如果同时设置了multiple属性和required属性,零个电子邮箱是允许的,也就是该输入框允许为空。

该类型的配套属性如下。

  • maxlength:可以输入的最大字符数。
  • minlength:可以输入的最少字符数。
  • multiple:布尔属性,是否允许输入多个以逗号分隔的电子邮箱。
  • pattern:输入必须匹配的正则表达式。
  • placeholder:输入为空时的显示文本。
  • readonly:布尔属性,该输入框是否只读。
  • size:一个非负整数,表示输入框的显示长度为多少个字符。
  • spellcheck:是否对输入内容启用拼写检查,可能的值为truefalse

该类型还可以搭配<datalist>标签,提供输入的备选项。

  1. <input type="email" size="40" list="defaultEmails">
  2. <datalist id="defaultEmails">
  3. <option value="jbond007@mi6.defence.gov.uk">
  4. <option value="jbourne@unknown.net">
  5. <option value="nfury@shield.org">
  6. <option value="tony@starkindustries.com">
  7. <option value="hulk@grrrrrrrr.arg">
  8. </datalist>

image

type="image"表示将一个图像文件作为提交按钮,行为和用法与type="submit"完全一致。

  1. <input type="image" alt="登陆" src="login-button.png">

上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。

该类型有以下配套属性。

  • alt:图像无法加载时显示的替代字符串。
  • src:加载的图像 URL。
  • height:图像的显示高度,单位为像素。
  • width:图像的显示宽度,单位为像素。
  • formaction:提交表单数据的服务器 URL。
  • formenctype:表单数据的编码类型。
  • formmethod:提交表单使用的 HTTP 方法(getpost)。
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示。

用户点击图像按钮提交时,会额外提交两个参数xy到服务器,表示鼠标的点击位置,比如x=52&y=55x是横坐标,y是纵坐标,都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性,比如name="position",那么将以该值作为坐标的前缀,比如position.x=52&position.y=55。这个功能通常用来地图类型的操作,让服务器知道用户点击了地图的哪个部分。

range

type="range"是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。因为拖动产生的值是不精确的,如果需要精确数值,不建议使用这个控件。常见的例子是调节音量。

  1. <input type="range" id="start" name="volume"
  2. min="0" max="11">

上面代码会产生一个最小值为0、最大值为11的滑块区域。用户拖动滑块,选择想要的音量。

该类型的配套属性如下,用法与type="number"一致。

  • max:允许的最大值,默认为100。
  • min:允许的最小值,默认为0。
  • step:步长值,默认为1。

value属性的初始值就是滑块的默认位置。如果没有设置value属性,滑块默认就会停在最大值和最小值中间。如果max属性、min属性、value属性都没有设置,那么value属性为50。

该类型与<datalist>标签配合使用,可以在滑动区域产生刻度。

  1. <input type="range" list="tickmarks">
  2. <datalist id="tickmarks">
  3. <option value="0" label="0%">
  4. <option value="10">
  5. <option value="20">
  6. <option value="30">
  7. <option value="40">
  8. <option value="50" label="50%">
  9. <option value="60">
  10. <option value="70">
  11. <option value="80">
  12. <option value="90">
  13. <option value="100" label="100%">
  14. </datalist>

上面代码会在0~100之间产生11个刻度。其中,0%50%100%三个位置会有文字提示,不过浏览器很可能不支持。

注意,浏览器生成的都是水平滑块。如果想要生成垂直滑块,可以使用 CSS 改变滑块区域的方向。

url

type="url"是一个只能输入网址的文本框。提交表单之前,浏览器会自动检查网址格式是否正确,如果不正确,就会无法提交。

  1. <input type="url" name="url" id="url"
  2. placeholder="https://example.com"
  3. pattern="https://.*" size="30"
  4. required>

上面代码的pattern属性指定输入的网址只能使用 HTTPS 协议。

注意,该类型规定,不带有协议的网址是无效的,比如foo.com是无效的,http://foo.com是有效的。

该类型的配套属性如下。

  • maxlength:允许的最大字符数。
  • minlength:允许的最少字符串。
  • pattern:输入内容必须匹配的正则表达式。
  • placeholder:输入为空时显示的示例文本。
  • readonly:布尔属性,表示该控件的内容是否只读。
  • size:一个非负整数,表示该输入框显示宽度为多少个字符。
  • spellcheck:是否启动拼写检查,可能的值为true(启用)和false(不启用)。

该类型与<datalist>标签搭配使用,可以形成下拉列表供用户选择。随着用户不断键入,会缩小显示范围,只显示匹配的备选项。

  1. <input id="myURL" name="myURL" type="url"
  2. list="defaultURLs">
  3. <datalist id="defaultURLs">
  4. <option value="https://developer.mozilla.org/" label="MDN Web Docs">
  5. <option value="http://www.google.com/" label="Google">
  6. <option value="http://www.microsoft.com/" label="Microsoft">
  7. <option value="https://www.mozilla.org/" label="Mozilla">
  8. <option value="http://w3.org/" label="W3C">
  9. </datalist>

上面代码中,<option>label属性表示文本标签,显示在备选下拉框的右侧,网址显示在左侧。

tel

type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。

  1. <input type="tel" id="phone" name="phone"
  2. pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  3. required>
  4. <small>Format: 123-456-7890</small>

上面代码定义了一个只能输入10位电话号码的输入框。

该类型的配套属性如下。

  • maxlength:允许的最大字符数。
  • minlength:允许的最少字符串。
  • pattern:输入内容必须匹配的正则表达式。
  • placeholder:输入为空时显示的示例文本。
  • readonly:布尔属性,表示该控件的内容是否只读。
  • size:一个非负整数,表示该输入框显示宽度为多少个字符。

color

type="color"是一个选择颜色的控件,它的值一律都是#rrggbb格式。

  1. <input type="color" id="background" name="background"
  2. value="#e66465">

上面代码在 Chrome 浏览器中,会显示一个#e66465的色块。点击色块,就会出现一个拾色器,供用户选择颜色。

如果没有指定value属性的初始值,默认值为#000000(黑色)。

date

type="date"是一个只能输入日期的输入框,用户可以输入年月日,但是不能输入时分秒。输入格式是YYYY-MM-DD

  1. <input type="date" id="start" name="start"
  2. value="2018-07-22"
  3. min="2018-01-01" max="2018-12-31">

上面代码会显示一个输入框,默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期。

该类型有以下配套属性。

  • max:可以允许的最晚日期,格式为yyyy-MM-dd
  • min:可以允许的最早日期,格式为yyyy-MM-dd
  • step:步长值,一个数字,以天为单位。

time

type="time"是一个只能输入时间的输入框,可以输入时分秒,不能输入年月日。日期格式是24小时制的hh:mm,如果包括秒数,格式则是hh: mm:ss。日期选择器的形式则随浏览器不同而不同。

  1. <input type="time" id="appt" name="appt"
  2. min="9:00" max="18:00" required>
  3. <small>营业时间上午9点到下午6点</small>

该类型有以下配套属性。

  • max:允许的最晚时间。
  • min:允许的最早时间。
  • readonly:布尔属性,表示用户是否不可以编辑时间。
  • step:步长值,单位为秒。
  1. <input id="appt" type="time" name="appt" step="2">

上面代码中,调节控件的话,时间每次改变的幅度是2秒钟。

month

type="month"是一个只能输入年份和月份的输入框,格式为YYYY-MM

  1. <input type="month" id="start" name="start"
  2. min="2018-03" value="2018-05">

该类型有以下配套属性。

  • max:允许的最晚时间,格式为yyyy-MM
  • min:允许的最早时间,格式为yyyy-MM
  • readonly:布尔属性,表示用户是否不可以编辑时间。
  • step:步长值,单位为月。

week

type="week"是一个输入一年中第几周的输入框。格式为yyyy-Www,比如2018-W18表示2018年第18周。

  1. <input type="week" name="week" id="camp-week"
  2. min="2018-W18" max="2018-W26" required>

该类型有以下配套属性。

  • max:允许的最晚时间,格式为yyyy-Www
  • min:允许的最早时间,格式为yyyy-Www
  • readonly:布尔属性,表示用户是否不可以编辑时间。
  • step:步长值,单位为周。

datetime-local

type="datetime-local"是一个时间输入框,让用户输入年月日和时分,格式为yyyy-MM-ddThh:mm。注意,该控件不支持秒。

  1. <input type="datetime-local" id="meeting-time"
  2. name="meeting-time" value="2018-06-12T19:30"
  3. min="2018-06-07T00:00" max="2018-06-14T00:00">

该类型有以下配套属性。

  • max:允许的最晚时间,格式为yyyy-MM-ddThh:mm
  • min:允许的最早时间,格式为yyyy-MM-ddThh:mm
  • step:步长值,单位为秒,默认值是60。

button

<button>标签会生成一个可以点击的按钮,没有默认行为,通常需要用type属性或脚本指定按钮的功能。

  1. <button>点击</button>

上面代码会产生一个按钮,上面的文字就是“点击”。

<button>内部不仅放置文字,还可以放置图像,这可以形成图像按钮。

  1. <button name="search" type="submit">
  2. <img src="search.gif">搜索
  3. </button>

<button>具有以下属性。

  • autofocus:布尔属性,表示网页加载时,焦点就在这个按钮。网页里面只能有一个元素,具有这个属性。
  • disabled:布尔属性,表示按钮不可用,会导致按钮变灰,不可点击。
  • name:按钮的名称(与value属性配合使用),将以name=value的形式,随表单一起提交到服务器。
  • value:按钮的值(与name属性配合使用),将以name=value的形式,随表单一起提交到服务器。
  • type:按钮的类型,可能的值有三种:submit(点击后将数据提交给服务器),reset(将所有控件的值重置为初始值),button(没有默认行为,由脚本指定按钮的行为)。
  • form:指定按钮关联的<form>表单,值为<form>id属性。如果省略该属性,默认关联按钮所在父表单。
  • formaction:数据提交到服务器的目标 URL,会覆盖<form>元素的action属性。
  • formenctype:数据提交到服务器的编码方式,会覆盖<form>元素的enctype属性。可能的值有三种:application/x-www-form-urlencoded(默认值),multipart/form-data(只用于文件上传),text/plain
  • formmethod:数据提交到服务器使用的 HTTP 方法,会覆盖<form>元素的method属性,可能的值为postget
  • formnovalidate:布尔属性,数据提交到服务器时关闭本地验证,会覆盖<form>元素的novalidate属性。
  • formtarget:数据提交到服务器后,展示服务器返回数据的窗口,会覆盖<form>元素的target属性。可能的值有_self(当前窗口),_blank(新的空窗口)、_parent(父窗口)、_top(顶层窗口)。

select

<select>标签用于生成一个下拉菜单。

  1. <label for="pet-select">宠物:</label>
  2. <select id="pet-select" name="pet-select">
  3. <option value="">--请选择一项--</option>
  4. <option value="dog"></option>
  5. <option value="cat"></option>
  6. <option value="others">其他</option>
  7. </select>

上面代码中,<select>生成一个下拉菜单,菜单标题是“—请选择一项—”,最右侧有一个下拉箭头。点击下拉箭头,会显示三个菜单项,供用户点击选择。

下拉菜单的菜单项由<option>标签给出,每个<option>代表可以选择的一个值。选中的<option>value属性,就是<select>控件发送的服务器的值。

<option>有一个布尔属性selected,一旦设置,就表示该项是默认选中的菜单项。

  1. <select name="choice">
  2. <option value="first">First Value</option>
  3. <option value="second" selected>Second Value</option>
  4. <option value="third">Third Value</option>
  5. </select>

上面代码中,第二项Second Value是默认选中的。页面加载的时候,会直接显示在下拉菜单上。

<select>有如下属性。

  • autofocus:布尔属性,页面加载时是否自动获得焦点。
  • disabled:布尔属性,是否禁用当前控件。
  • form:关联表单的id属性。
  • multiple:布尔属性,是否可以选择多个菜单项。默认情况下,只能选择一项。一旦设置,多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键,选中多项。
  • name:控件名。
  • required:布尔属性,是否为必填控件。
  • size:设置了multiple属性时,页面显示时一次可见的行数,其他行需要滚动查看。

option,optgroup

<option>标签用在<select><optgroup><datalist>里面,表示一个菜单项,参见<select>的示例。

它有如下属性。

  • disabled:布尔属性,是否禁用该项。
  • label:该项的说明。如果省略,则等于该项的文本内容。
  • selected:布尔属性,是否为默认值。显然,一组菜单中,只能有一个菜单项设置该属性。
  • value:该项提交到服务器的值。如果省略,则等于该项的文本内容。

<optgroup>表示菜单项的分组,通常用在<select>内部。

  1. <label>宠物:
  2. <select name="pets" multiple size="4">
  3. <optgroup label="四条腿的宠物">
  4. <option value="dog"></option>
  5. <option value="cat"></option>
  6. </optgroup>
  7. <optgroup label="鸟类">
  8. <option value="parrot">鹦鹉</option>
  9. <option value="thrush">画眉</option>
  10. </optgroup>
  11. </select>
  12. </label>

上面代码中,<select>是一个下拉菜单,它的内部使用<optgroup>将菜单项分成两组。每组有自己的标题,会加粗显示,但是用户无法选中。

它的属性如下。

  • disabled:布尔设置,是否禁用该组。一旦设置,该组所有的菜单项都不可选。
  • label:菜单项分组的标题。

datalist

<datalist>标签是一个容器标签,用于为指定控件提供一组相关数据,通常用于生成输入提示。它的内部使用<option>,生成每个菜单项。

  1. <label for="ice-cream-choice">冰淇淋:</label>
  2. <input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">
  3. <datalist id="ice-cream-flavors">
  4. <option value="巧克力">
  5. <option value="椰子">
  6. <option value="薄荷">
  7. <option value="草莓">
  8. <option value="香草">
  9. </datalist>

上面代码中,<input>生成一个文本输入框,用户可以输入文本。<input>list属性指定关联的<datalist>id属性。<datalist>的数据列表用于输入建议,用户点击输入框的时候,会显示一个下拉菜单,里面是建议的输入项。并且还会自动匹配用户已经输入的字符,缩小可选的范围,比如用户输入“香”,则只会显示“香草”这一项。

注意,<option>在这里可以不需要闭合标签。

<option>标签还可以加入label属性,作为说明文字。Chrome 浏览器会将其显示在value的下一行。

  1. <datalist id="ide">
  2. <option value="Brackets" label="by Adobe">
  3. <option value="Coda" label="by Panic">
  4. </datalist>

上面代码的渲染结果是,Chrome 浏览器会在下拉列表显示value值(比如Brackets),然后在其下方以小字显示label值(比如by Adobe)。

textarea

<textarea>是一个块级元素,用来生成多行的文本框。

  1. <textarea id="story" name="story"
  2. rows="5" cols="33">
  3. 这是一个很长的故事。
  4. </textarea>

上面代码会生成一个长度为5行,宽度为33个字符的文本框。

该标签有如下属性。

  • autofocus:布尔属性,是否自动获得焦点。
  • cols:文本框的宽度,单位为字符,默认值为20。
  • disabled:布尔属性,是否禁用该控件。
  • form:关联表单的id属性。
  • maxlength:允许输入的最大字符数。如果未指定此值,用户可以输入无限数量的字符。
  • minlength:允许输入的最小字符数。
  • name:控件的名称。
  • placeholder:输入为空时显示的提示文本。
  • readonly:布尔属性,控件是否为只读。
  • required:布尔属性,控件是否为必填。
  • rows:文本框的高度,单位为行。
  • spellcheck:是否打开浏览器的拼写检查。可能的值有true(打开),default(由父元素或网页设置决定),false(关闭)。
  • wrap:输入的文本是否自动换行。可能的值有hard(浏览器自动插入换行符CR + LF,使得每行不超过控件的宽度),soft(输入内容超过宽度时自动换行,但不会加入新的换行符,并且浏览器保证所有换行符都是CR + LR,这是默认值),off(关闭自动换行,单行长度超过宽度时,会出现水平滚动条)。

output

<output>标签是一个行内元素,用于显示用户操作的结果。

  1. <input type="number" name="a" value="10"> +
  2. <input type="number" name="b" value="10"> =
  3. <output name="result">20</output>

该标签有如下属性。

  • for:关联控件的id属性,表示为该控件的操作结果。
  • form:关联表单的id属性。
  • name:控件的名称。

progress

<progress>标签是一个行内元素,表示任务的完成进度。浏览器通常会将显示为进度条。

  1. <progress id="file" max="100" value="70"> 70% </progress>

该标签有如下属性。

  • max:进度条的最大值,应该是一个大于0的浮点数。默认值为1。
  • value:进度条的当前值。它必须是0max属性之间的一个有效浮点数。如果省略了max属性,该值则必须在01之间。如果省略了value属性,则进度条会出现滚动,表明正在进行中,无法知道完成的进度。

meter

<meter>标签是一个行内元素,表示指示器,用来显示已知范围内的一个值,很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。

  1. <p>烤箱的当前温度是<meter min="200" max="500"
  2. value="350"> 350 度</meter></p>

上面代码会显示一个指示条,左侧表示200,右侧表示500,当前位置停留在350

注意,<meter>元素的子元素,正常情况下不会显示。只有在浏览器不支持<meter>时才会显示。

该标签有如下属性。

  • min:范围的下限,必须小于max属性。如果省略,则默认为0
  • max:范围的上限,必须大于min属性。如果省略,则默认为1
  • value:当前值,必须在min属性和max属性之间。如果省略,则默认为0
  • low:表示“低端”的上限门槛值,必须大于min属性,小于high属性和max属性。如果省略,则等于min属性。
  • high:表示“高端”的下限门槛值,必须小于max属性,大于low属性和min属性。如果省略,则等于max属性。
  • optimum:指定最佳值,必须在min属性和max属性之间。它应该与low属性和high属性一起使用,表示最佳范围。如果optimum小于low属性,则表示“低端”是最佳范围;如果大于high属性,则表示“高端”是最佳范围;如果在lowhigh之间,则表示“中间地带”是最佳范围。如果省略,则等于minmax的中间值。
  • form:关联表单的id属性。

Chrome 浏览器使用三种颜色,表示指示条所处的位置。较好情况时,当前位置为绿色;一般情况时,当前位置为黄色;较差情况时,当前位置为红色。

  1. <meter id="fuel" name="fuel"
  2. min="0" max="100"
  3. low="33" high="66" optimum="80"
  4. value="50">
  5. at 50/100
  6. </meter>

上面代码中,指示条可以分成三段:0 ~ 32,33 ~ 65,66 ~ 100。由于optimum属性是80,因此66 ~ 100是较好情况,33 ~ 65是一般情况,0 ~ 32是较差情况。浏览器因此会根据value属性,将当前位置显示为不同颜色,小于33时显示红色,大于65时显示绿色,两者之间显示黄色。

0

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