HTML - <input> 标签

HTML <input> 标签用于指定输入字段。输入元素是 Web 开发的重要组成部分，因为当包含在 <form> 元素中时，它们有助于收集和提交用户数据。

语法

<input type = ".."/>

属性

HTML input 标签支持 HTML 的全局和事件属性。同时也接受一些特定的属性，如下所示。

属性	值	描述
accept	文件扩展名 audio/* video/* image/* 媒体类型	定义用户可以在文件输入对话框中选择的的文件类型的筛选器（仅适用于 type="file"）。
alt	文本	为图像定义备用文本（仅适用于 type="image"）。
autocomplete	开启关闭	定义 <input> 元素是否应启用自动完成功能。
autofocus	autofocus	定义 <input> 元素在页面加载时是否应自动获得焦点。
checked	checked	定义 <input> 元素在页面加载时是否应预先选中（适用于 type="checkbox" 或 type="radio"）。
dirname	inputname.dir	定义将提交文本方向。
disabled	disabled	定义 <input> 元素是否应被禁用。
form	form_id	定义 <input> 元素所属的表单。
formaction	URL	定义提交表单时将处理输入控件的文件的 URL（适用于 type="submit" 和 type="image"）。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	定义提交表单数据到服务器时应如何编码（适用于 type="submit" 和 type="image"）。
formmethod	get post	定义将数据发送到 action URL 的 HTTP 方法（适用于 type="submit" 和 type="image"）。
formnovalidate	formnovalidate	定义提交表单时不应验证表单元素。
formtarget	_blank _self _parent _top 框架名称	定义在何处显示提交表单后收到的响应（适用于 type="submit" 和 type="image"）。
height	像素	定义 <input> 元素的高度（仅适用于 type="image"）。
list	datalist_id	引用包含 <input> 元素预定义选项的 <datalist> 元素。
max	数字日期	定义 <input> 元素的最大值。
maxlength	数字	定义 <input> 元素允许的最大字符数。
min	数字日期	定义 <input> 元素的最小值。
minlength	数字	定义 <input> 元素所需的最小字符数。
multiple	multiple	定义用户是否可以在 <input> 元素中输入多个值。
name	文本	定义 <input> 元素的名称。
pattern	正则表达式	定义 <input> 元素的值将与其进行检查的正则表达式。
placeholder	文本	定义简短提示，描述 <input> 元素的预期值。
popovertarget	元素ID	定义要调用的弹出窗口元素（仅适用于 type="button"）。
popovertargetaction	隐藏显示切换	定义单击按钮时弹出窗口元素会发生什么（仅适用于 type="button"）。
readonly	readonly	定义输入字段是否为只读。
required	required	定义在提交表单之前必须填写输入字段。
size	数字	定义 <input> 元素的宽度（以字符为单位）。
src	URL	定义用作提交按钮的图像的 URL（仅适用于 type="image"）。
step	数字任意	定义输入字段中合法数字之间的间隔。
type	按钮复选框颜色日期本地日期时间电子邮件文件隐藏图片月份数字密码单选按钮范围重置搜索提交电话文本时间网址星期	定义要显示的 <input> 元素的类型。
value	文本	定义 <input> 元素的值。
width	像素	定义 <input> 元素的宽度（仅适用于 type="image"）。

HTML input 标签示例

以下示例将说明 input 标签的使用，以及在何处、何时以及如何在表单中使用它。HTML <input> 标签创建输入字段，但 type 属性在输入字段中起主要作用。

创建输入字段

在以下程序中，我们使用 HTML <input> 标签来创建一个输入字段，以便从用户那里获取输入。我们使用 type="text" 属性来接受输入。以下代码将生成一个包含输入字段的输出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Input</title>
</head>
<body>
   <!--create input tag-->
   <form> Enter name: <input type="text" placeholder="Name">
   </form>
</body>
</html>

输入字段上的值范围

考虑另一种情况，我们将使用 min 和 max 属性。如果手动输入值，则定义的范围将不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Input</title>
</head>
<body>
   <!-- Numeric input field with min and max value-->
   <form> 
   <label>Enter number:</label>
   <input type="number" min="1" max="50" 
          placeholder="Number between 1 to 50">
   </form>
</body>
</html>

使用 input 标签创建单选按钮和复选框

在此程序中，我们使用表单内的 <input> 标签创建 type="checkbox" 和 "radio" 类型的输入字段，以允许用户通过选中字段来选择值。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML input tag</title>
</head>

<body>
    <!-- Input type Checkbox and Radio Button -->
    <form>
        <label>Language:</label>
        <br> 
        HTML <input type="checkbox"> 
        CSS <input type="checkbox"> 
        JavaScript <input type="checkbox"> 
        ReactJS <input type="checkbox">
        <br> 
        <label>Rating:</label>
        <br> 
        Expert <input type="radio" name='rating' value='exoert'> 
        Intermediate <input type="radio" name='rating' value='intermediate'>
        Beginner <input type="radio" name='rating' value='beginner'>
   </form>
</body>
</html>

禁用输入字段

让我们看看以下示例，我们将使用带有 disabled 属性的 input 标签。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input</title>
</head>
<body>
   <!--create input tag-->
   <form> 
        Disabled field: <input type="text" value="Enter Your Name" disabled>
   </form>
</body>
</html>

日期输入字段

以下是一个示例，我们将使用 input type="date" 以及 required 属性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input</title>
</head>
<body>
   <!--create input tag-->
   <form>
      <label>Select date:</label>
      <input type="date" value="Disabled" required>
      <button>Submit</button>
   </form>
</body>
</html>

支持的浏览器

标签
input	是	是	是	是	是

html_tags_reference.htm

打印页面