菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML 教程

HTML 首页 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 格式化 HTML 引用 HTML 注释 HTML 颜色 HTML CSS HTML 链接 HTML 图像 HTML 收藏夹图标 HTML 页面标题 HTML 表格 HTML 列表 HTML 块级和内联元素 HTML Div HTML 类 HTML Id HTML Iframes HTML JavaScript HTML 文件路径 HTML Head HTML 布局 HTML 响应式 HTML 计算机代码 HTML 语义化 HTML 样式指南 HTML 实体 HTML 符号 HTML 表情符号 HTML 字符集 HTML URL 编码 HTML vs. XHTML

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML 输入属性 输入表单属性

HTML 图形

HTML Canvas HTML SVG

HTML 媒体

HTML 媒体 HTML 视频 HTML 音频 HTML 插件 HTML YouTube

HTML API

HTML 地理定位 HTML 拖放 HTML Web 存储 HTML Web Workers HTML SSE

HTML 示例

HTML 示例 HTML 编辑器 HTML 测验 HTML 练习 HTML 网站 HTML 面试准备 HTML 新兵训练营 HTML 证书 HTML 摘要 HTML 无障碍性

HTML 参考

HTML 标签列表 HTML 属性 HTML 全局属性 HTML 浏览器支持 HTML 事件 HTML 颜色 HTML Canvas HTML 音频/视频 HTML 文档类型 HTML 字符集 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法 PX 到 EM 转换器 键盘快捷键

HTML 输入属性


本章描述了 HTML <input> 元素的不同属性。


value 属性

输入 value 属性为输入字段指定一个初始值。

示例

具有初始(默认)值的输入字段

<form>
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">姓:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>
自己动手试一试 »

readonly 属性

输入 readonly 属性指定输入字段为只读。

只读输入字段无法修改(但是,用户可以对其进行 Tab 键操作,高亮显示,并从中复制文本)。

提交表单时将发送只读输入字段的值!

示例

一个只读输入字段

<form>
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">姓:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>
自己动手试一试 »

disabled 属性

输入 disabled 属性指定输入字段应被禁用。

禁用的输入字段不可用,也无法点击。

提交表单时将不会发送禁用输入字段的值!

示例

一个禁用的输入字段

<form>
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">姓:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>
自己动手试一试 »


size 属性

输入 size 属性指定输入字段的可见宽度(以字符为单位)。

size 的默认值为 20。

注意: size 属性适用于以下输入类型:text、search、tel、url、email 和 password。

示例

设置输入字段的宽度

<form>
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>
自己动手试一试 »

maxlength 属性

输入 maxlength 属性指定输入字段中允许的最大字符数。

注意: 当设置了 maxlength 时,输入字段将不会接受超过指定字符数。但是,此属性不提供任何反馈。因此,如果您想提醒用户,您必须编写 JavaScript 代码。

示例

设置输入字段的最大长度

<form>
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
自己动手试一试 »

min 和 max 属性

输入 minmax 属性指定输入字段的最小和最大值。

minmax 属性适用于以下输入类型:number、range、date、datetime-local、month、time 和 week。

提示: 同时使用 max 和 min 属性可以创建合法值的范围。

示例

设置最大日期、最小日期和合法值的范围

<form>
  <label for="datemax">输入 1980-01-01 之前的日期:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">输入 2000-01-01 之后的日期:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">数量 (1 到 5 之间):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
自己动手试一试 »

multiple 属性

输入 multiple 属性指定用户可以在输入字段中输入多个值。

multiple 属性适用于以下输入类型:email 和 file。

示例

一个接受多个值的文件上传字段

<form>
  <label for="files">选择文件:</label>
  <input type="file" id="files" name="files" multiple>
</form>
自己动手试一试 »

pattern 属性

输入 pattern 属性指定一个正则表达式,用于在提交表单时检查输入字段的值。

pattern 属性适用于以下输入类型:text、date、search、url、tel、email 和 password。

提示: 使用全局 title 属性来描述模式以帮助用户。

提示: 在我们的 JavaScript 教程中了解更多关于 正则表达式 的信息。

示例

一个只能包含三个字母(不能有数字或特殊字符)的输入字段

<form>
  <label for="country_code">国家代码:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="三个字母的国家代码">
</form>
自己动手试一试 »

placeholder 属性

输入 placeholder 属性指定一个简短的提示,描述输入字段的预期值(一个示例值或预期格式的简短描述)。

在用户输入值之前,简短提示会显示在输入字段中。

placeholder 属性适用于以下输入类型:text、search、url、number、tel、email 和 password。

示例

带占位符文本的输入字段

<form>
  <label for="phone">输入电话号码:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
自己动手试一试 »

required 属性

输入 required 属性指定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型:text、search、url、tel、email、password、日期选择器、number、checkbox、radio 和 file。

示例

一个必填输入字段

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
</form>
自己动手试一试 »

step 属性

输入 step 属性指定输入字段的合法数字间隔。

示例:如果 step="3",合法数字可以是 -3、0、3、6 等。

提示: 此属性可以与 max 和 min 属性一起使用,以创建合法值的范围。

step 属性适用于以下输入类型:number、range、date、datetime-local、month、time 和 week。

示例

具有指定合法数字间隔的输入字段

<form>
  <label for="points">点数:</label>
  <input type="number" id="points" name="points" step="3">
</form>
自己动手试一试 »

注意: 输入限制并非万无一失,JavaScript 提供了多种方法来添加非法输入。为了安全地限制输入,它还必须由接收方(服务器)进行检查!


autofocus 属性

输入 autofocus 属性指定页面加载时输入字段应自动获得焦点。

示例

让“名字”输入字段在页面加载时自动获得焦点

<form>
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">姓:</label><br>
  <input type="text" id="lname" name="lname">
</form>
自己动手试一试 »

height 和 width 属性

输入 heightwidth 属性指定 <input type="image"> 元素的高度和宽度。

提示: 始终为图像指定 height 和 width 属性。如果设置了 height 和 width,则在页面加载时会为图像保留所需的空间。如果没有这些属性,浏览器不知道图像的大小,因此无法为其保留适当的空间。结果将是页面布局在加载过程中(图像加载时)发生变化。

示例

将图像定义为提交按钮,并带有 height 和 width 属性

<form>
  <label for="fname">名:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓氏:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="提交" width="48" height="48">
</form>
自己动手试一试 »

list 属性

输入 list 属性引用一个 <datalist> 元素,其中包含 <input> 元素的预定义选项。

示例

带有 <datalist> 中预定义值的 <input> 元素

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
自己动手试一试 »

autocomplete 属性

输入 autocomplete 属性指定表单或输入字段是否应启用自动填充。

自动填充允许浏览器预测值。当用户开始在字段中输入时,浏览器应根据之前输入的值显示选项以填充该字段。

autocomplete 属性适用于 <form> 和以下 <input> 类型:text、search、url、tel、email、password、日期选择器、range 和 color。

示例

一个启用了自动填充的 HTML 表单,以及一个禁用自动填充的输入字段

<form action="/action_page.php" autocomplete="on">
  <label for="fname">名:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓氏:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="提交">
</form>
自己动手试一试 »

提示:在某些浏览器中,您可能需要激活自动完成功能才能使其生效(请查看浏览器菜单中的“首选项”)。



HTML 表单和输入元素

标签 描述
<form> 定义一个用于用户输入的 HTML 表单
<input> 定义一个输入控件

有关所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持