表单控件常用元素

表单控件常用元素

1 按钮控件元素：<button></button>

1.1 按钮控件的常用属性：

序号	属性	说明
1	type	只能使用预定义的submit、button、reset其中之一
2	name	定义元素的名称，与id类似
3	value	设置元素初始值
4	disable	禁用按钮
5	form	通过表单的ID绑定表单,默认类型为submit
6	formaction	设置表单提交的对象
7	formmethod	设置提交方式GET、POST

1.2 示例

<form id="login">
<section>
<label for="username">账号：</label><input type="text" id="username" name="username" autofocus>
</section>
<section>
<label for="password">账号：</label><input type="password" id="password" name="password" >
</section>
</form>
<button
name="btn"
form="login"
formaction="login.php"
formmethod="POST"
value="1"
>登录</button>

2 下拉列表元素<select></select>常用属性和事件

• 下拉列表使用标签selec+optgroup+option组合实现；
• 属性name定义在select中，值属性value定义在option中，分组使用optgroup。

2.1 <select>的属性

• name：提交数据时的参数名/变量名
• multiple：设置是否可多选
• disabled：禁用
• size:同时可显示的选项数

2.3 <optgroup>的属性

• label:分组名称

2.4 <option>的属性

序号	属性	描述
1	value	设置参数的值
2	label	默认选项文本值
3	selected	默认选中
3	disabled	禁用

2.5 <select>事件

• onchange:当选项值发生变化时触发；
• onclick ：点击下拉框时触发

2.6 示例

<section>
      <select
        name="cousre"
        id=""
        multiple
        size="4"
        onchange="alert(this.value)"
      >
        <optgroup label="文">
          <option value="zz">政治</option>
          <option value="ls">历史</option>
          <option value="dl">地理</option>
        </optgroup>
        <optgroup label="理">
          <option value="wl">物理</option>
          <option value="hx">化学</option>
          <option value="sx" selected>数学</option>
        </optgroup>
      </select>
    </section>

3 文本域常用属性与事件

• 多行文本域<textarea>；
• <textarea></textarea>是双标签，没有value属性，文本内容就是它的值。

3.1 常用属性

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

3.2 文本域事件

• onchange: 文本域内容发生改变时触发
• onclick : 点击时触发
• onselect: 选择文本时触发

3.3 示例

<section>
      <textarea
        form="register"
        name="remark"
        id="remark"
        cols="10"
        rows="5"
        wrap="hard"
        minlength="10"
        maxlength="100"
        placeholder="添加备注,10~100字内"
        onselect="this.style.color='red'"
      ></textarea>
    </section>

4 表单分组

• 表单分组元素<fieldset>,当表单元素较多时就需要进行分组
• 它有一个子元素<legend>，用于设置分组标题

4.1 <fieldset>的属性

序号	属性	描述
1	name	分组元素的名称
2	form	绑定表单，默认为最近的表单
3	disabled	禁用分组

• name、form属性仅供参考，以内部控件的from属性为准

4.2 示例

<form id="questionnaire ">
      <fieldset>
        <legend>基本信息</legend>
        <section>
          <label for="username">姓名：</label>
          <input type="text" id="username" name="username" />
          <label for="age">年龄：</label>
          <input type="number" id="age" name="age" />
        </section>
      </fieldset>
    </form>
    <fieldset form="questionnaire">
      <legend>兴趣爱好</legend>
      <section>
        <input type="checkbox" name="hobby[]" id="game" />
        <label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="basketball" />
        <label for="basketball">篮球</label>
        <input type="checkbox" name="hobby[]" id="program" />
        <label for="program">编程</label>
      </section>
    </fieldset>
    <fieldset form="questionnaire">
      <legend>选修课程</legend>
      <section>
        <select
          name="cousre"
          id=""
          multiple
          size="4"
          onchange="alert(this.value)"
        >
          <optgroup label="文">
            <option value="zz">政治</option>
            <option value="ls">历史</option>
            <option value="dl">地理</option>
          </optgroup>
          <optgroup label="理">
            <option value="wl">物理</option>
            <option value="hx">化学</option>
            <option value="sx" selected>数学</option>
          </optgroup>
        </select>
      </section>
    </fieldset>