HTML - input 标签

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

语法


<input type = ".."/>

属性

<input> 标签支持 HTML 的全局属性和事件属性。也接受下面列出的一些特定属性：

属性	属性	描述
accept	file_extension audio/* video/* image/* media_type	规定通过文件上传来提交的文件的类型。规定用户可以从文件输入对话框中选择哪些文件类型的过滤器（仅适用于 type="file"）。
alt	text	规定图像的替代文本（仅适用于 type="image"）。
autocomplete	on off	规定 <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 framename	规定在何处显示提交表单后收到的响应（适用于 type="submit" 和 type="image"）。
height	pixels	规定 <input> 元素的高度（仅适用于 type="image"）。
list	datalist_id	引用包含 <input> 元素的预定义选项的 <datalist> 元素。
max	number date	规定 <input> 元素的最大值。
maxlength	number	规定 <input> 元素允许的最大字符数。
min	number date	规定 <input> 元素的最小值。
minlength	number	规定 <input> 元素中所需的最少字符数。
multiple	multiple	规定用户可以在 <input> 元素中输入多个值。
name	text	规定 <input> 元素的名称。
pattern	regexp	规定检查 <input> 元素值的正则表达式。
placeholder	text	规定描述 <input> 元素预期值的简短提示。
popovertarget	element_id	规定要调用的弹出框元素（仅适用于 type="button"）。
popovertargetaction	hide show toggle	规定当您单击按钮时弹出框元素会发生什么（仅适用于 type="button"）。
readonly	readonly	规定输入字段是只读的。
required	required	规定在提交表单之前必须填写输入字段。
size	number	规定 <input> 元素的宽度（以字符数为单位）。
src	URL	规定用作提交按钮的图像的 URL（仅适用于 type="image"）。
step	number any	规定输入字段中合法数字之间的间隔。
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	规定要显示的 <input> 元素的类型。
value	text	规定 <input> 元素的值。
width	pixels	规定 <input> 元素的宽度（仅适用于 type="image"）。

<input> 标签示例

下面的示例将说明输入标签的用法，在表单上使用它的位置、时间和方式。<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> 标签创建输入字段 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>	Yes	Yes	Yes	Yes	Yes

打印本页