HTML input属性



  • 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属性

    heightwidth属性指定<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属性

    minmax属性用于为<input>元素指定的最小值和最大值。 以下类型的input具有minmax属性:
    • 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类型:emailfile
    <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属性使用于以下输入类型:textsearchurltelemailpassword
    提示:使用全局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属性使用以下输入类型:textsearchurltelemailpassword
    <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类型:textsearchurltelemailpassworddatedatetime-localtimenumbercheckboxradiofile
    <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属性可与minmax属性一起使用,以创建一系列合法值。
    step属性使用于以下input类型:numberrangedatedatetime-localmonthtimeweek
    <form action="/jc_script/urlencode.php" target="_blank" method="get">                                  
             5的倍数:
             <input type="number" name="points" step="5" ><br>
             <input type="submit"  value="提交">
           </form>