- HTML 教程
- HTML - 首页
- HTML - 路线图
- HTML - 简介
- HTML - 历史与演变
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块
- HTML - 样式表
- HTML - 格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图片
- HTML - 图片地图
- HTML - 内联框架 (iframe)
- HTML - 短语元素
- HTML - 元标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表头与标题
- HTML - 表格样式
- HTML - 表格列组 (colgroup)
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 邮件链接
- HTML 颜色名称与值
- HTML - 颜色名称
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 头部
- HTML - 头元素
- HTML - 添加 Favicon
- HTML - Javascript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - 使用 CSS 进行布局
- HTML - 响应式设计
- HTML - 符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - Canvas
- HTML API
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 其他
- HTML - 文档对象模型 (DOM)
- HTML - MathML
- HTML - 微数据
- HTML - IndexedDB
- HTML - 网页消息传递
- HTML - Web CORS
- HTML - WebRTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - 网页幻灯片
- HTML 工具
- HTML - Velocity Draw
- HTML - 二维码
- HTML - Modernizer
- HTML - 验证
- HTML - 颜色拾取器
- HTML 参考
- HTML - 速查表
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 码
- ASCII 码表查询
- HTML - 颜色名称
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- 语言 ISO 代码
- HTML - 字符编码
- HTML - 已弃用的标签
- HTML 资源
- HTML - 快速指南
- HTML - 有用资源
- HTML - 颜色代码生成器
- HTML - 在线编辑器
HTML - 输入属性
HTML 输入属性用于定义<input>元素的特性和行为。
这些属性用于不同类型的输入字段,例如文本、电子邮件、密码、日期、数字等等。请注意,Input 元素用于为基于 Web 的表单创建交互式控件,以便它可以接受来自用户的输入。
<input> 元素只需要一个开始标签。在本教程中,我们将探讨与 <input> 元素一起使用的属性。
以下是 <input> 元素的属性:
属性 | 描述 |
---|---|
type | HTML 输入标签的 HTML 输入类型属性指定要显示的输入元素类型。 |
name | HTML 输入名称属性用于指定元素的名称。 |
value | HTML 输入值属性用于定义页面加载时输入字段的初始值。 |
size | HTML 输入大小属性以字符数表示输入字段的宽度。 |
maxlength | HTML 输入 maxlength 属性用于指定输入文本的最大字符限制。 |
readonly | HTML 输入只读属性用于指定具有不可编辑文本的输入字段。 |
disabled | HTML 输入 disabled 是一个布尔属性,用于使表单元素不可交互。 |
min | HTML 输入 min 属性指定输入字段可以接受的最小值。 |
max | HTML 输入 max 属性指定输入字段可以接受的最大值。 |
accept | HTML 输入 accept 属性用于定义服务器将接受的文件扩展名类型。 |
multiple | HTML 输入 multiple 属性是一个布尔属性,允许表单控件接受多个值。 |
placeholder | HTML 输入 placeholder 属性用于定义简短的提示,帮助用户进行数据输入。 |
required | HTML 输入 required 属性用于指定在提交表单之前必须填写输入字段。 |
autofocus | HTML 输入 autofocus 属性是一个布尔属性,用于指定页面加载后应自动聚焦某个元素。 |
list | HTML 输入 list 属性用于指定用户可以选择预定义选项的列表。 |
输入标签属性示例
以下示例将说明输入标签的所有属性,以及我们应该在哪里以及如何使用这些属性!
输入标签的类型和值属性
在此示例中,我们演示了不同类型的输入字段及其在 HTML 表单中的相应值属性。我们在输入字段中提供的值将是默认值,用户可以根据需要编辑它。
<!DOCTYPE html> <html> <head> <title>Input Type Attribute Examples</title> </head> <body> <h1>HTML Input Type Attribute Examples</h1> <form> <!-- Text Input --> <label for="text">Text:</label> <input type="text" id="text" name="text" value="Default Text"> <br><br> <!-- Password Input --> <label for="password">Password:</label> <input type="password" id="password" name="password" value="password123"> <br><br> <!-- Range Input --> <label for="range">Range:</label> <input type="range" id="range" name="range" min="0" max="100" value="50"> <br><br> <!-- Datetime-local Input --> <label for="datetime">Datetime-local:</label> <input type="datetime-local" id="datetime" name="datetime" value="2023-06-01T12:00"> <br><br> <!-- Submit Button --> <input type="submit" value="Submit"> </form> </body> </html>
输入标签的名称属性
在此示例中,我们将使用 input 标签的 name 属性为用户名和电子邮件指定名称。
<!DOCTYPE html> <html lang="en"> <head> <title>Form Example with Name Attribute</title> <script> function showAlert() { var name = document.getElementById('name').value; var email = document.getElementById('email').value; alert('Name: ' + name + '\nEmail: ' + email); } </script> </head> <body> <h1>Contact Us</h1> <form onsubmit="return false;"> <label for="name">Name:</label> <input type="text" id="name" name="user_name"> <br><br> <label for="email">Email:</label> <input type="email" id="email" name="user_email"> <br><br> <button type="button" onclick="showAlert()"> Submit </button> </form> </body> </html>
输入标签的大小和 maxlength 属性
在此示例中,我们将看到 input 元素的 size 和 maxlength 属性之间的区别。
<!DOCTYPE html> <html> <head> <title>Size and Maxlength Attribute</title> </head> <body> <h1>HTML Size and Maxlength Attribute</h1> <h2>Size Attribute</h2> <p> The <code>size</code> attribute specifies the visible width of the input field in characters. </p> Size 10: <input type="text" name="size-example" size="10" value="1234567890"> <h2>Maxlength Attribute</h2> <p> The <code>maxlength</code> attribute specifies the maximum number of characters that can be entered in the input field. </p> Maxlength 10: <input type="text" maxlength="10" value="1234567890"> <h2>Combined Size and Maxlength</h2> <p> Here is an example combining both <code>size</code> and <code>maxlength</code> attributes. </p> Size 10, Maxlength 5: <input type="text" size="10" maxlength="5" value="12345"> </body> </html>
输入标签的 disabled 和 readonly 属性
以下示例显示了"readonly"属性和"disabled"属性在<input>元素中的用法区别。
<!DOCTYPE html> <html> <head> <title>Readonly and Disabled Attributes </title> </head> <body> <h1>HTML Readonly and Disabled Attributes </h1> <h2>Readonly Attribute</h2> <p> The <code>readonly</code> attribute allows the user to view the content but not modify it. </p> Readonly: <input type="text" value="Readonly Text" readonly> <h2>Disabled Attribute</h2> <p> The <code>disabled</code> attribute makes the input field unmodifiable and prevents user interaction. </p> Disabled: <input type="text" value="Disabled Text" disabled> </body> </html>
输入标签的 min 和 max 属性
在以下示例中,我们将看到如何在 input 标签中使用 min 和 max 属性。我们使用 min 和 max 属性将最少工作小时数指定为 3,最大工作小时数指定为 8。
<!DOCTYPE html> <html> <head> <title>The min and max Attribute</title> </head> <body> <form > Emp. Name: <input type = "text" name = "your_name" placeholder = "your name..."/> <br><br> Organization: <input type = "text" name = "organization" value = "Tutorialspoint" readonly/> <br><br> Working Hrs: <input type = "number" name = "working_hours" min="3" max="8"/> </form> </body> </html>
输入标签的 accept 和 multiple 属性
在此示例中,我们将看到如何在 input 标签内使用 accept 和 multiple 属性。
<!DOCTYPE html> <html> <head> <title>Multiple and Accept Attributes</title> </head> <body> <h1>HTML Multiple and Accept Attributes</h1> <h2>Multiple Attribute</h2> <p> The <code>multiple</code> attribute allows the user to select multiple files. </p> Select multiple files: <input type="file" id="multiple-example" name="files" multiple> <h2>Accept Attribute</h2> <p> The <code>accept</code> attribute specifies the types of files that the server accepts (that can be submitted through file upload). </p> Select image files only: <input type="file" id="accept-example" name="images" accept="image/*"> </body> </html>
输入标签的 placeholder 和 required 属性
在以下示例中,我们为姓名输入字段使用 placeholder 属性,并在电子邮件和出生日期字段中使用 required 属性,表示该字段必须包含某些值才能成功提交表单。
<!DOCTYPE html> <html> <head> <title>Placeholder and Required Attributes</title> </head> <body> <h3>Placeholder and Required Attributes</h3> <form onsubmit="return false;" > <p>The * Star represents mandatory field</p> <!-- Placeholder for name entry --> Emp. Name: <input type="text" id="emp-name" name="emp-name" placeholder="Your Name"> <br><br> <!-- Email and DOB are mandatory --> Emp. Email: <input type="email" id="emp-email" name="emp-email" placeholder="[email protected]" required>* <br><br> Date of Birth: <input type="date" required>* <br><br> <input type="submit" value="Submit"> </form> </body> </html>
输入标签的 autofocus 属性
以下是 autofocus 属性的示例。页面完全加载后,将自动聚焦“员工姓名”字段。
<!DOCTYPE html> <html> <head> <title>The autofocus Attribute</title> </head> <body> <form onsubmit="return false;"> Emp. Name: <input type = "text" name = "your_name" autofocus/> <br><br> Emp. Email: <input type = "email" name = "mail" placeholder = "[email protected]" /> <br><br> <input type = "submit"> </form> </body> </html>
输入标签的 list 属性
在以下示例中,我们使用 `list` 属性与 `input type=text` 一起使用,并将 `list` 属性的值指定为 datalist 的 id 名称。
<!DOCTYPE html> <html lang="en"> <body> <p> Click on input field and select from dropdown: </p> <input type="text" list="fruits"> <datalist id='fruits'> <option value="Apple"></option> <option value="Banana"></option> <option value="Orange"></option> <option value="Grapes"></option> <option value="Pears"></option> </datalist> </body> </html>