举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > html表单输入文本框默认值 HTML 表单输入

html表单输入文本框默认值 HTML 表单输入

2023-03-12 16:18 HTML教程

html表单输入文本框默认值 HTML 表单输入

html表单输入文本框默认值

HTML表单输入文本框默认值是指在表单中的文本框中显示的默认文本。它可以帮助用户快速填写表单,也可以提供一些提示信息,以便用户正确填写表单。

要在 HTML 表单中设置文本框的默认值,可以使用 value 属性。value 属性是一个字符串,它包含要显示在文本框中的默认值。例如:

<input type="text" name="name" value="Your Name">

上面的代码将会在文本框中显示“Your Name”作为默认值。当用户开始输入时,这个默认值会立刻消失。

此外,还可以使用 placeholder 属性来定义文本框的默认值。placeholder 属性也是一个字符串,它包含要显示在文本框中的默认值。但是不同于 value 属性,placeholder 的内容不会马上随着用户开始输入而立刻消失,而是当用户开始输入时才会出现光标并清除 placeholder 的内容。例如:

<input type="text" name="name" placeholder="Your Name">

上面的代码将会在文本框中显示“Your Name”作为 placeholder 的内容。当用户开始输入时,这个 placeholder 的内容会马上出现光标并清除该内容。

因此,使用 value 或者 placeholder 属性都可以很方便地为 HTML 表单中的文本框设置一些默认值来帮助用户快速和正确地填写表单信息。

HTML 表单输入

HTML表单输入


如果将type属性设置为input元素的文本,浏览器将显示单行文本框。

以下列表总结了可用于文本输入元素类型的属性。

  • dirname - 控制文本方向性。
  • list - 指定为此元素提供值的datalist元素的ID。
  • maxlength - 指定用户可以在文本框中输入的最大字符数。
  • pattern - 指定正则表达式模式以用于输入验证。
  • placeholder - 指定一个提示,告诉用户您希望输入的种类。
  • readonly - 如果存在,此属性使文本框为只读。
  • required - 指定用户必须输入值以进行输入验证。
  • size - 指定元素在文本框中可见的字符数中的宽度。
  • value - 指定文本框的初始值。

文本输入大小和最大长度

有两个属性对文本框的大小有影响。

maxlength 属性指定用户可以输入的最大字符数,而 size 属性指定文本框可以显示的字符数。

对于这两个属性,字符数表示为正整数值。

以下代码显示了正在使用的这两个属性。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input maxlength="10" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City: 
      <input size="10" id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input size="10" maxlength="10" id="fave" name="fave" />
      </label>
      <button type="submit">Submit Vote</button>
    </p>
  </form>
</body>
</html>

第一个输入元素具有值为10的maxlength属性。

第二个输入元素的size属性的值为10.这意味着浏览器必须确保其大小的文本框,以便它可以显示十个字符。

size属性不会对用户可以输入的字符数量应用任何限制。

第三个输入元素具有两个大小设置,效果是:固定屏幕上的大小,并限制用户可以输入的字符数。


文本输入占位符和值

您可以使用value属性指定默认值,并使用placeholder属性为用户提供有用的提示。

以下代码显示了正在使用的这些属性。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input placeholder="Your name" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City: 
      <input placeholder="Where you  live" id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apple" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
</body>
</html>

当您使用按钮元素重置表单时,浏览器将恢复占位符和默认值。

文本输入数据列表

list属性允许您指定datalist元素的id值,这将用于建议用户可能的值。

对于 text 类型,值显示为自动完成建议。您可以通过选项元素指定要给用户的值。

datalist可以有option元素。

option 元素可以具有局部属性: disabled,selected,label,value

以下代码显示用于文本框创建一组值的datalist option元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input placeholder="Your name"
        id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City: <input placeholder="Where you  live"
        id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: <input list="fruitlist" id="fave"
        name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>

  <datalist id="fruitlist">
    <option value="A" label="First" />
    <option value="B">Second</option>
    <option value="C"/>
  </datalist>

</body>
</html>

datalist 中包含的每个option元素表示要向用户建议的值。

value属性指定将在输入元素中使用的数据值(如果选择了该选项)。

您可以使用不同的label来描述该option,方法是使用label属性或在选项元素中定义内容。

文本输入只读和禁用

readonly和 disabled属性允许您创建用户无法编辑的文本框。每个都创建不同的视觉效果。

以下代码使用readonlydisabled属性。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" disabled
        id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City: <input value="Boston" readonly
        id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: <input id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
</body>
</html>

来自输入元素的数据(具有disabled属性)不会提交到服务器。

输入自动对焦

您可以选择在显示表单时浏览器专注于哪个输入元素。

以下代码使用 autofocus 属性设置自动对焦输入元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p>
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button>Submit Vote</button>
  </form>
</body>
</html>

您可以将 autofocus 属性仅应用于一个input元素。如果尝试多次应用元素,最后一个获得焦点。

使用tabindex属性设置制表顺序

以下代码显示如何使用tabindex属性设置Tabbing Order。

<html>

<head>
<title>Tabbing Order using the tabindex Attribute</title>
</head>

<body>
<form action="http://your server/" method="get" name="frmTabExample">
    <input type="checkbox" name="chkNumber" value="1" tabindex="3" /> One<br />
    <input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two<br />
    <input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three<br />
    <input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four<br />
    <input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five<br />
    <input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six<br />
    <input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven<br />
    <input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight<br />
    <input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine<br />
    <input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten<br />
    <input type="submit" value="Submit" />
</form>
</body>
</html>
阅读全文
以上是编程学为你收集整理的html表单输入文本框默认值 HTML 表单输入全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部