html语言中按钮，下拉列表，文本域，表单域的常用元素与属性

按钮（button）的常用属性

1.type

• submit 提交
• button 单纯的一个按钮
• reset 重置

  注意：按钮的type必须使用预定义的这些。默认情况下type是选择submit。

  2.name

• 按钮的唯一名称，与id同效果。
• 发送到服务器上显示的名字。

  3.value

• 按钮的初始值，可以通过javaScript进行修改。

  4.disabled

• 禁用按钮

  5.form

• 按钮所属表单的id值。

  5，formaction

• 设置表单提交的处理脚本，分为GEN与POST类型。

  6.formmethod

• 设置表单提交类型。

  7,formtarget

• 设置表单打开网页的方式
• 分别为_selfb本页打开 ；_blank新页面打开； _parent父页面打开 _top顶层页面打开。

  <section>
  <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
  <button
    type="submit"
    formaction="login.php"
    formmethod="POST"
    formtarget="_blank"
  >
    登录
  </button>
  <button
    type="submit"
    formaction="register.php"
    formmethod="GET"
    formtarget="_blank"
  >
    注册
  </button>
  </section>

  下拉列表（select）的常用属性与事件。

  属性

序号	属性	描述
1	name	参数的名子或变量名
2	multiple	是否允许多选择（布尔）
3	size	允许同时显示的列表项
4	disabled	是否禁用(布尔属性)

事件

序号	事件	描述
1	onchange	当下拉列表选项值发生变化时才会触发
2	onclick`	只要点击就会触发(选项值可以不改变)

下拉列表使用<select> + <optgroup> + <option>组合元素实现

参数名name定义在<select>中,参数值value,定义在<option>中.

<form action="">
  <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
  <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
  <select name="" id="" size="8" multiple>
    <optgroup label="分组标题1">
      <option value="请求参数值">HTML5</option>
      <option value="请求参数值2" selected>CSS3</option>
      <option value="请求参数值3" disabled>JavaScript</option>
      <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
      <option value="请求参数值" label="ECMScript6"> </option
      ><option value="jquery" label="jQuery"> </option
    ></optgroup>
    <optgroup label="分组标题2">
      <option value="请求参数值4" label="PHP"> </option
      ><option value="请求参数值5" label="MySQL"> </option
      ><option value="请求参数值6" label="Laravel"> </option
    ></optgroup>
  </select>
</form>

文本域（textarea）的常用属性与事件。

属性

序号	属性	描述
1	cols	文本域可视宽度
2	rows	文本域可输入的行数
3	name	文本域参数名称
4	form	绑定所属表单元素
5	minlength	允许输入最小字符长度
6	maxlength	允许输入最大字符长度
7	maxlength	允许输入最大字符长度
8	placeholder	提示信息占位符
9	wrap	换行方式:hard/soft默认
10	disabled	禁用(布尔属性)
11	autofocus	自动获取焦点(布尔属性)
12	autocomplete	自动完成(布尔属性)

事件

序号	事件	描述
1	onclic	点击时触发
2	onchang	文本被修改时触发
3	onselec	文本被选中时触发

<textarea>是双标签,没有value属性,标签内部的文本就是参数值

<textarea
  name="reply"
  id=""
  cols="30"
  rows="10"
  minlength="5"
  maxlength="50"
  form="common"
  placeholder="不超过50字符"
  onchange="alert('内容改变了')"
  onselect="this.style.color='red'"
>

表单域分组元素<fieldset>

• 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
• 它只有一个子元素<legend>,设置分组标题

常用属性

序号	属性	描述
1	name	分组名称
2	form	分组所属表单,默认是最近的表单
3	disabled	禁用分组(布尔属性)

name,for`属性仅供参考,提交参数仍依赖内部控件中的form属性

<!-- 提交设置通过<button>元素完成 -->
    <form action="" id="register"></form>
    <!-- 表单域分组1 -->
    <fieldset name="base" form="register">
      <legend>基本信息</legend>
      <section>
        <input
          type="email"
          name="email"
          placeholder="您的邮箱"
          form="register"
          autofocus
        />
      </section>
    </fieldset>
    <!-- 表单域分组2 -->
    <fieldset name="other" form="register">
      <legend>选填信息</legend>
      <section>
        <input
          type="text"
          name="nickname"
          placeholder="您的呢称"
          form="register"
        />
      </section>
    </fieldset>
    <button
      type="submit"
      form="register"
      formaction="register.php"
      formmethod="POST"
      formtarget="_blank"
    >
      提交
    </button>