HTML input属性

本章介绍表单的各种属性使用和作用。

value属性

value属性指定输入字段的初始值：

<form>
         名字:<br>
         <input type="text" name="yourname" value="Jim"><br>
         姓氏:<br>
         <input type="text" name="homename" value="Green">
       </form>

尝试一下

readonly属性

readonly属性指定输入字段是只读的（不能更改）：

<form action="/jc_script/urlencode.php" target="_blank">
         名字:<br>
         <input type="text" name="yourname" value="Jim"><br>
         姓氏:<br>
         <input type="text" name="homename" value="Green" readonly>
         <input type="submit"  value="提交">
       </form>

尝试一下

disabled属性

disabled属性指定禁用输入字段。禁用的输入字段不可用且不可单击，并且在提交表单时不会发送其值：

<form action="/jc_script/urlencode.php" target="_blank">
         名字:<br>
         <input type="text" name="yourname" value="Jim"><br>
         姓氏:<br>
         <input type="text" name="homename" value="Green" disabled>
         <input type="submit"  value="提交">
       </form>

尝试一下

size属性

size属性指定输入字段的大小（以字符为单位）：

<form action="/jc_script/urlencode.php" target="_blank">
         名字:<br>
         <input type="text" name="yourname" value="Jim" size="40"><br>
         姓氏:<br>
         <input type="text" name="homename" value="Green">
         <input type="submit"  value="提交">
       </form>

尝试一下

maxlength属性

maxlength属性指定输入字段的最大允许长度：

<form action="/jc_script/urlencode.php" target="_blank">
         名字:<br>
         <input type="text" name="yourname" value="Jim" maxlength="10"><br>
         姓氏:<br>
         <input type="text" name="homename" value="Green">
         <input type="submit"  value="提交">
       </form>

尝试一下

使用maxlength属性，输入字段将不会接受超过允许的字符数。 maxlength属性不提供任何反馈。如果要提醒用户，则必须编写JavaScript代码。注意：输入限制并非万无一失，JavaScript提供了许多添加非法输入的方法。想要安全地限制输入，必须由接收器（服务端）进行检查！

HTML5添加的属性

下表列出了HTML5添加的一些新属性：

属性名称	所属元素
autocomplete	<form>，<input>
autofocus	<input>
form	<input>
formaction	<input>
formenctype	<input>
formmethod	<input>
formnovalidate	<input>
formtarget	<input>
height	<input>
width	<input>
list	<input>
min	<input>
max	<input>
multiple	<input>
pattern (regexp)	<input>
placeholder	<input>
required	<input>
step	<input>
novalidate	<form>

autocomplete属性

autocomplete属性指定表单或输入字段是应该打开还是关闭自动完成。启用自动完成功能后，浏览器会根据用户之前输入的值自动完成输入值。提示：对于表单，可以打开自动完成“on”，特定输入字段可以关闭“off”，反之亦然。 autocomplete属性适用<form>元素和以下<input>类型：

text
search
url
tel
email
password
date
datetime-local
time
range
color

下面这个例子展示的是整个表单打开自动完成，电子邮件字段关闭自动完成。

<form action="/jc_script/urlencode.php" target="_blank" autocomplete="on">
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename">
         电子邮件:<br>
         <input type="email" name="email" autocomplete="off">
         <input type="submit"  value="提交">
       </form>

尝试一下

提示：在某些浏览器中，您可能需要激活自动完成功能才能使其正常工作。

novalidate属性

novalidate属性是一个<form>属性。如果指定novalidate，则表单提交时不验证表单数据。下面的例子将不会验证email是否合法。

<form action="/jc_script/urlencode.php" target="_blank" novalidate>
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename">
         电子邮件:<br>
         <input type="email" name="email">
         <input type="submit"  value="提交">
       </form>

尝试一下

autofocus属性

autofocus属性指定输入字段应在页面加载时自动获得焦点。下面的例子将“姓氏”字段自动获得焦点。

<form action="/jc_script/urlencode.php" target="_blank">
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename" autofocus>
         电子邮件:<br>
         <input type="email" name="email">
         <input type="submit"  value="提交">
       </form>

尝试一下

form属性

form属性指定<input>元素所属的一个或多个表单。

提示：要引用多个表单，请使用以空格分隔的表单ID列表。

下面的例子将“电子邮件”字段移动到<form>外面，给它赋予form属性，它仍然输入表单的一部分。

<form action="/jc_script/urlencode.php" target="_blank" id="form1">
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename">
         <input type="submit"  value="提交">
       </form>
         电子邮件:<br>
         <input type="email" name="email" form="form1">

尝试一下

formaction属性

formaction属性指定在提交表单时将指定处理数据的URL。formaction属性会覆盖<form>元素的action属性。formaction属性与type="submit"或type="image"一起使用。

<form action="/jc_script/urlencode.php" target="_blank">
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename">
         电子邮件:<br>
         <input type="email" name="email">
         <input type="submit"  value="提交">
         <input type="submit"  value="提交到另一个地址" formaction="/jc_script/urlencode2.php">
       </form>

尝试一下

formenctype属性

formenctype属性指定在提交时如何编码表单数据（仅适用于method=“post”的表单）。 formenctype属性会覆盖<form>元素的 enctype属性。 formenctype属性与type="submit"或type="image"一起使用。

<form action="/jc_script/urlencode.php" target="_blank" method="post">
         名字:<br>
         <input type="text" name="yourname"><br>
         <input type="submit"  value="提交">
         <input type="submit"  value="另一个提交" formenctype="multipart/form-data">
       </form>

尝试一下

formmethod属性

formmethod属性定义用于将表单数据发送到处理程序的HTTP方法。 formmethod属性会覆盖<form>元素的method属性。 formmethod属性可以与type="submit"或type="image"一起使用。下面第二个按钮提交将以post提交，覆盖了表单默认的get方式。

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         名字:<br>
         <input type="text" name="yourname"><br>
         <input type="submit"  value="提交">
         <input type="submit"  value="另一个提交" formmethod="post">
       </form>

尝试一下

formnovalidate属性

formnovalidate属性会覆盖<form>元素的novalidate属性。 formnovalidate属性可以与type="submit"一起使用。下面第二个按钮提交将不验证email的合法性。

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         电子邮件:<br>
         <input type="email" name="email"><br>
         <input type="submit"  value="提交">
         <input type="submit"  value="不验证的提交" formnovalidate>
       </form>

尝试一下

formtarget属性

formtarget属性指定一个名称或关键字，指示在提交表单后跳转到的响应的位置。 formtarget属性会覆盖<form>元素的target属性。 formtarget属性可以与type="submit"或type="image"一起使用。下面第二个按钮提交将在本窗口打开。

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         名字:<br>
         <input type="text" name="username"><br>
         <input type="submit"  value="提交">
         <input type="submit"  value="在本窗口打开处理地址" formtarget="_self">
       </form>

尝试一下

height和width属性

height和width属性指定<input type="image">元素的高度和宽度。

始终指定图像的大小。如果浏览器不知道大小，则图像加载时页面会闪烁。

下面的提交按钮是一个指定大小的图片。

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         名字:<br>
         <input type="text" name="username"><br>
         <input type="image" src="/images/submit.png"  alt="提交"  width="48" height="48">
       </form>

尝试一下

list属性

list属性引用 <datalist>元素的id值为<input>元素设置预定义选项。

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         编程语言:<br>
         <input type="text" name="lang"  list="langlist"><br>
         <datalist id="langlist">
         <option value="Java">
         <option value="PHP">
         <option value="Python">
         <option value="Ruby">
         <option value="C++">
         </datalist>
         <input type="submit"  value="提交">
       </form>

尝试一下

min和max属性

min和max属性用于为<input>元素指定的最小值和最大值。以下类型的input具有min和max属性：

number
range
date
datetime-local
month
time
week

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         只能选择 1980-01-01 之前:<br>
         <input type="date" name="bday" max="1979-12-31"><br>

         只能选择 2000-01-01 之后:<br>
         <input type="date" name="bday" min="2000-01-02"><br>

         只能输入20 - 50<br>
         <input type="number" name="quantity" min="20" max="50"><br>
         <input type="submit"  value="提交">
       </form>

尝试一下

multiple属性

multiple属性指定允许用户在<input>元素中输入多个值。 multiple属性使用于这两个input类型：email和file。

<form action="/jc_script/urlencode.php" target="_blank" method="get">                                  
         <input type="file" name="files"  multiple><br>
         <input type="submit"  value="提交">
       </form>
       <p><b>提示：</b>Windows按住Ctrl或Shift键选多个文件，Mac系统按住Command键选取多个文件</p>

尝试一下

pattern属性

pattern属性指定一个正则表达式，<input>检查元素的值。 pattern属性使用于以下输入类型：text，search，url，tel，email和password。

提示：使用全局title属性来描述帮助用户的怎么按照正则表达式的规则输入。

提示：在JavaScript教程中了解有关正则表达式的更多信息。

<form action="/jc_script/urlencode.php" target="_blank" method="get">
         国家代码：                             
         <input type="text" name="countrycode" pattern="[A-Za-z]{3}" title="请输入三个字母"><br>
         <input type="submit"  value="提交">
       </form>

尝试一下

placeholder属性

placeholder属性指定描述输入字段的预期值的提示（样本值或格式的简短描述）。在用户输入值之前，提示将显示在输入字段中。 placeholder属性使用以下输入类型：text，search，url，tel，email和password。

<form action="/jc_script/urlencode.php" target="_blank" method="get">                                  
         用户名：
         <input type="text" name="username"  placeholder="请输入用户名"><br>
         <input type="submit"  value="提交">
       </form>

尝试一下

required属性

required属性指定在提交表单之前必须填写的input字段。 required属性使用于以下input类型：text，search，url，tel，email，password，date，datetime-local，time，number，checkbox，radio和file。

<form action="/jc_script/urlencode.php" target="_blank" method="get">                                  
         用户名：
         <input type="text" name="username" required ><br>
         <input type="submit"  value="提交">
       </form>

尝试一下

step属性

step属性指定<input>元素的合法数字间隔示例：如果step =“5”，则合法数字可以是-5,0,5,10等。

提示： step属性可与min和max属性一起使用，以创建一系列合法值。

step属性使用于以下input类型：number，range，date，datetime-local，month，time和week。

<form action="/jc_script/urlencode.php" target="_blank" method="get">                                  
         5的倍数：
         <input type="number" name="points" step="5" ><br>
         <input type="submit"  value="提交">
       </form>

尝试一下