如果将type属性设置为input元素的文本，浏览器将显示单行文本框。
以下列表总结了可用于文本输入元素类型的属性。
有两个属性对文本框的大小有影响。
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属性允许您创建用户无法编辑的文本框。每个都创建不同的视觉效果。
以下代码使用readonly和disabled属性。
<!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属性设置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>
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.dropdown {...
单位计算CSS3允许你计算单位。这是一种灵活的方法，在创建样式时可以同时控制和精确。!DOCTYPE HTMLhtmlheadtitleExample/titles...
css 是一个网页的外衣，网页好不好看取决于 css 样式，而布局是 css 中比较重要的部分，当产品把一个需求设计交到手中，我首先要...
CSS Float(浮动)CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的...
HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HT...
