html学习：第4章 细说表单控件（按钮、下拉列表、文本域、表单域分组）

1.按钮按钮常用属性

代码演示

<button type="button">我是按钮</button>

属性介绍：

属性	值	描述
autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
form	form_name	规定按钮属于一个或多个表单。
formaction	url	覆盖 form 元素的 action 属性。注释：该属性与 type=”submit” 配合使用。
formenctype	见注释	覆盖 form 元素的 enctype 属性。注释：该属性与 type=”submit” 配合使用。
formmethod	get post	覆盖 form 元素的 method 属性。注释：该属性与 type=”submit” 配合使用。
formnovalidate	formnovalidate	覆盖 form 元素的 novalidate 属性。注释：该属性与 type=”submit”配合使用。
formtarget _blank _self _parent _top	framename	覆盖 form 元素的 target 属性。注释：该属性与 type=”submit” 配合使用。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

2.下拉列表常用属性与事件

代码演示

通过 <optgroup> 标签把相关的选项组合在一起：
<select>
  <optgroup label="下拉1">
    <option value="volvo">111</option>
    <option value="saab">222</option>
  </optgroup>
  <optgroup label="下拉2">
    <option value="mercedes">222</option>
    <option value="audi">333</option>
  </optgroup>
</select>

属性介绍：

• 定义和用法

• <optgroup> 标签定义选项组。

• optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

3.文本域常用属性与事件

代码演示

<!-- 表单内部为空,控件全部使用form属性与之绑定 -->
    <form action="" id="common"></form>
    <!-- change:值改变时触发, select:选中文本时触发 -->
    <textarea
      name="reply"
      id=""
      cols="30"
      rows="10"
      minlength="5"
      maxlength="50"
      form="common"
      placeholder="不超过50字符"
      onchange="alert('内容改变了')"
      onselect="this.style.color='red'"
    ></textarea>
    <!-- 动态设置处理脚本与请求类型 -->
    <button
      type="submit"
      form="common"
      formaction="register.php"
      formmethod="POST"
    >
      提交
    </button>

属性介绍：

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
cols	number	规定文本区内的可见宽度。
disabled	disabled	规定禁用该文本区。
form	form_id	规定文本区域所属的一个或多个表单。
maxlength	number	规定文本区域的最大字符数。
name	name_of_textarea	规定文本区的名称。
placeholder	text	规定描述文本区域预期值的简短提示。
readonly	readonly	规定文本区为只读。
required	required	规定文本区域是必填的。
rows	number	规定文本区内的可见行数。
wrap	hard soft	规定当在表单中提交时，文本区域中的文本如何换行。。

4.表单域分组元素常用属性

代码演示

<!-- 提交设置通过<button>元素完成 -->
    <form action="" id="register"></form>
    <!-- 表单域分组1 -->
    <fieldset name="base" form="register">
      <legend>基本信息</legend>
      <section>
        <input
          type="email"
          name="email"
          placeholder="您的邮箱"
          form="register"
          autofocus
        />
        <input
          type="password"
          name="psw1"
          placeholder="您的密码"
          form="register"
        />
        <input
          type="password"
          name="psw2"
          placeholder="重复密码"
          form="register"
        />
      </section>
    </fieldset>
    <!-- 表单域分组2 -->
    <fieldset name="other" form="register">
      <legend>选填信息</legend>
      <section>
        <input
          type="text"
          name="nickname"
          placeholder="您的呢称"
          form="register"
        />
        <input type="number" name="age" min="10" max="70" step="1"
        form="register" / placeholder="您的年龄"> <input type="url" name="site"
        placeholder="个人站点"" form="register"/>
      </section>
    </fieldset>
    <button
      type="submit"
      form="register"
      formaction="register.php"
      formmethod="POST"
      formtarget="_blank"
    >
      提交
    </button>

属性介绍：

• 定义和用法

• fieldset 元素可将表单内的相关元素分组。

• <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

• 当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

• <fieldset> 标签没有必需的或唯一的属性。

• <legend> 标签为 fieldset 元素定义标题。

属性	值	描述
disabled	disabled	规定应该禁用 fieldset。
form	form_id	规定 fieldset 所属的一个或多个表单。
name	value	规定 fieldset 的名称。

总结：学了php感觉这节课的知识还是好理解一些的 就是后面几节课讲到的容器和格栅布局还是一头雾水。