文本框、文本区和其它输入类型

可以使用 <textarea> 和 </textarea> 标签创建一个文本区，而不仅仅是一个文本框。包括在这两个标签之间的任何文本都将显示为那个框中的默认条目。

文本输入属性

一旦浏览器呈现表单， autofocus 属性就会自动把用户的光标聚焦在这个文本框中。一个表单只能有一个 autofocus 字段 placeholder 属性使

type 属性指示要显示的是什么类型的表单元素，在这里是一个简单的单行文本输入框，。在这个示例中，注意 placeholder 、 required 和 autofocus 属性的使用。

size 属性指示文本输入框的宽度应该能够容纳大约多少个字符。如果使用一种比例间隔字体，那么输入的宽度将因用户输入的内容而异。如果输入太长而在框中放不下，大多数 Web 浏览器将自动把文本滚动到左边。

maxlength 属性确定允许用户在文本框中输入的字符数。如果用户尝试输入超过指定长度的内容，那么额外的字符将不会出现。你可以指定一个更长、更短或者与文本框的物理大小相同的长度。 size 和 maxlength 属性只用于那些打算用于文本值的输入字段，比如 type="text" 、 type="email" 、 type="URL" 和 type="tel" ，而不适用于复选框和单选按钮，因为它们具有固定的大小。

密码框

密码框是一种特殊的文本框，专门用于输入密码。通过 type="password" 定义。

✂️

html

<label for="password">密码</label>
<input type="password" id="password" name="password" />

多行文本域

rows 属性用于设置可见行数，当文本内容超出这个值时将显示垂直滚动条， cols 属性用于设置一行可输入多少个字符。标签对之间可以输入文本，也可以不输入，如果输入将作为默认文本显示在文本域中。另外， rows 和 cols 属性都可以不设置，而改用 CSS 的 width 和 height 属性设置。

✂️

html

<form method="post" action="">
  <fieldset class="base_info">
    <legend>用户信息</legend>
    <label for="userName">用户名</label>
    <input type="text" value="" id="userName" />
    <label for="email">电子邮件</label>
    <input type="text" value="" id="email" />
  </fieldset>
  <fieldset class="feedback_content">
    <legend>反馈信息</legend>
    <label for="msg">具体内容</label>
    <textarea
      rows="8"
      cols="50"
      id="msg"
      placeholder="请填写详实的反馈意见。"
    ></textarea>
    <label for="up_file">附件</label> <input type="file" id="up_file" />
    <p class="tips">附件仅支持.jpg 、.gif 、.png 图片。</p>
  </fieldset>
  <button type="submit">提交</button> <button type="reset">重置</button>
</form>

TextArea 自适应文字行数

✂️

window.onload = function () {
  var autoRow = document.getElementById('autoRow');
  autoRow.style.overflowY = 'hidden'; //Y 轴是否超过隐藏
  autoRow.onkeyup = function () {
    // 键盘事件
    autoRow.style.height = autoRow.scrollHeight;
  };
};