表单部件

通用属性

属性名称	描述
atuofocus	页面加载时自动具有输入焦点
disabled	失效，用户不能交互
name	元素名称，跟表单数据提交，参数中的key
value	元素的初始值，参数中的value

文本输入框

readonly:只读
placeholder：占位符，描述
输入的最大字符数

• 单行文本框
• E-mail地址框
  multiple:多个地址以逗号分隔
• 密码框
  在安全连接上托管任何涉及表单的页面
• 搜索框
  值可以被自动保存用来在同一站点上的多个页面上自动补全。
• 电话号码栏
• URL栏
• 多行文本框textarea
  允许用户输入包含硬换行符
  右下角拖放操作可有resize为none关闭

属性名	描述
cols	字符宽度
rows	文本行数

下拉内容

属性：selected

• 选择框

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

• 多选选择框

<select multiple id="multi" name="multi">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

不是下拉列表

• 自动补全输入框

 <label for="myFruit">What's your favorite fruit?</label>
            <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
            <datalist id="mySuggestion">
              <option>Apple</option>
              <option>Banana</option>
              <option>Blackberry</option>
              <option>Blueberry</option>
              <option>Lemon</option>
              <option>Lychee</option>
              <option>Peach</option>
              <option>Pear</option>
            </datalist>

可选中项

属性
checked:默认被选中
value：默认为on

• 复选框

<fieldset>
          <legend>Choose all the vegetables you like to eat</legend>
          <ul>
            <li>
              <label for="carrots">Carrots</label>
              <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
            </li>
            <li>
              <label for="peas">Peas</label>
              <input type="checkbox" id="peas" name="peas" value="peas">
            </li>
            <li>
              <label for="cabbage">Cabbage</label>
              <input type="checkbox" id="cabbage" name="cabbage" value="cabbage">
            </li>
            <li>
              <label for="cauli">Cauliflower</label>
              <input type="checkbox" id="cauli" name="cauli" value="cauli">
            </li>
            <li>
              <label for="broc">Broccoli</label>
              <input type="checkbox" id="broc" name="broc" value="broc">
            </li>
          </ul>
        </fieldset>

• 单选按钮

 <fieldset>
          <legend>What is your favorite meal?</legend>
          <ul>
            <li>
              <label for="soup">Soup</label>
              <input type="radio" checked id="soup" name="meal" value="soup">
            </li>
            <li>
              <label for="curry">Curry</label>
              <input type="radio" id="curry" name="meal" value="curry">
            </li>
            <li>
              <label for="pizza">Pizza</label>
              <input type="radio" id="pizza" name="meal" value="pizza">
            </li>
            <li>
              <label for="tacos">Tacos</label>
              <input type="radio" id="tacos" name="meal" value="tacos">
            </li>
            <li>
              <label for="bolognaise">Bolognaise</label>
              <input type="radio" id="bolognaise" name="meal"  value="bolognaise">
            </li>
          </ul>
        </fieldset>

按钮

• submit
• reset
• anonymous

 <p>
          <button type="submit">
            This a <br><strong>submit button</strong>
          </button>
        </p>
        <p>
          <input type="submit" value="This is a submit button">
        </p>
        <p>
          <button type="reset">
              This a <br><strong>reset button</strong>
          </button>
        </p>
        <p>
          <input type="reset" value="This is a reset button">
        </p>
        <p>
          <button type="button">
              This an <br><strong>anonymous button</strong>
          </button>
        </p>
        <p>
          <input type="button" value="This is an anonymous button">
        </p>

button的文本可以styling

高级表单部件

• 数字
  属性：min max step
• 滑块
  属性：min max step
• 日期时间选择器
  属性：max min
  本地时间：datetime-local
  月:month
  时间:time
  星期：week
• 拾色器

 <form>
        <p>
          <label for="age">What is your age?</label>
          <input type="number" name="age" id="age" min="1" max="10" step="2">
        </p>
        <p>
          <label for="beans">How many beans can you eat?</label>
          <input type="range" name="beans" id="beans" min="0" max="500" step="10">
          <span class="beancount"></span>
        </p>
        <p>
          <label for="myDate">When are you available this summer?</label>
          <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
        </p>

        <p>
          <label for="meet">When shall we have the meeting?</label>
          <input type="datetime-local" name="meet" id="meet">
        </p>
        <p>
          <label for="month">What month is your favorite?</label>
          <input type="month" name="month" id="month">
        </p>
        <p>
          <label for="time">Set the time for your wifi fridge</label>
          <input type="time" name="time" id="time">
        </p>
        <p>
            <label for="week">whick week</label>
            <input type="week" name="week" id="week">
        </p>
        <p>
          <label for="color">What is your favourite color?</label>
          <input type="color" name="color" id="color">
        </p>
    </form>

其他小部件

• 文件选择器
  accept属性来约束接受的文件类型
  multiple选择多个文件
• 隐藏内容
  other-examples.html?file=&timestamp=1286705410&pos.x=197&pos.y=101
• 图像按钮
  other-examples.html?file=&timestamp=1286705410&pos.x=197&pos.y=101
• 仪表和进度条
  进度条progress
  仪表meter

<form>
        <p>
          <label for="file">Choose an image to upload</label>
          <input type="file" name="file" id="file" accept="image/*" multiple>
        </p>
        <div>
          <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
        </div>
        <p>
          <input type="image" name="pos" alt="" src="map.png">
        </p>
        <p>
          <progress max="100" value="75">75/100</progress>
        </p>
        <p>
          <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
        </p>
    </form>