《Head first HTML与CSS 第二版》读书笔记 第十四章 表单

使用<form>元素建立表单。几乎全部块元素均可以放在<form>元素中。

form的action属性包含web服务的URL告诉浏览器表单提交到的地址。method属性指定提交的方法。

input元素时一个void元素，因此没有结束标签。

• 一行文本输入框：<input type="text"> 可使用maxlength属性限制用户最多能输入的字符数。
• 提交按钮：<input type="submit" value=""> value属性是按钮显示的文字，默认是Submit或Submit Query。
• 单选按钮：<input type="radio" name="" value="">每组相关联的单选按钮必须有相同的name。能够有不一样的值。checked是布尔属性，为真是浏览器显示表单时默认选中。
• 复选框：<input type="checkbox" name="" value="">name和value的规则与radio相同。也可使用checked布尔属性。
• 文本区：<textarea name="" rows="" cols=""></textarea>可输入多行文本，若是文本在文本区内放不下右侧有出现滚动条。textarea不是void元素，因此它有结束标记。使用rows和cols属性指定文本区高度和宽度分别是多少字符。开始和结束标记之间的全部文本会成为浏览器文本区中的初始文本。
• 菜单：<select>元素与嵌套在其中的<option>元素结合使用能够建立一个菜单。<option>元素表示一个菜单项。<option>元素的内容做为菜单项的描述，value属性做为每一个菜单项的值。

  <select name="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
  </select>

       

如下是HTML5中新加入的：

• 数字输入：<input type="number" min="0" max="20">使用max和min来限制容许输入的范围。
• 范围输入：<input type="range" min="" max="" step="">相似于number，只是会显示一个滚动条和一个输入框。step属性用来指定步长。
• 颜色输入：<input type="color">单击控件会弹出一个颜色选择器。
• 日期输入：<input type="date">
• email输入：<input type="email"> 电话号码输入：<input type="tel"> url输入：<input type="url">这三种<input>都是text类型的表中。在桌面浏览器上，看不出任何差异，在移动浏览器上会获得定制键盘，能够更容易输入须要的字符。

对于text <input>和<textarea>浏览器有限制能够输入的文本字符数，可是一般不会输入这么多，彻底能够忽略。对于<textarea>没有办法限制用户能够键入多少文本。

对于复选框，提交表单时会把全部复选框的值合并为一个值。例如：spice=salt&pepper&garlic。

<input>是一个内联元素。

伪类first-child选中第一个子元素。

 

用<label>元素标记表单中的标签（文本提示），能够提供页面结构更多的信息，对于有视力障碍的人有助于使用屏幕阅读器。

 

fieldset和legend将元素组织在一块儿：

<fieldset>
  <legend>Condiments</legend>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</fieldset>

密码输入：<input type="password">

文件输入：<input type='file">

多选菜单：在<select>元素中添加multiple布尔属性，能够将菜单变为多选菜单。

 

placeholder属性在大多数<input>元素中均可以使用，在未输入时显示提示信息。

required布尔属性为真时单击提交按钮时浏览器将检查该控件是否有值，若是没输入将不提交并提示。