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

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

移动用户-1144300
移动用户-1144300原创
2020年04月06日 18:00:48946浏览

按钮(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顶层页面打开。
    1. <section>
    2. <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
    3. <button
    4. type="submit"
    5. formaction="login.php"
    6. formmethod="POST"
    7. formtarget="_blank"
    8. >
    9. 登录
    10. </button>
    11. <button
    12. type="submit"
    13. formaction="register.php"
    14. formmethod="GET"
    15. formtarget="_blank"
    16. >
    17. 注册
    18. </button>
    19. </section>

    下拉列表(select)的常用属性与事件。

    属性

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

事件

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

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

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

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

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

表单域分组元素<fieldset>

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

常用属性

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

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

  1. <!-- 提交设置通过<button>元素完成 -->
  2. <form action="" id="register"></form>
  3. <!-- 表单域分组1 -->
  4. <fieldset name="base" form="register">
  5. <legend>基本信息</legend>
  6. <section>
  7. <input
  8. type="email"
  9. name="email"
  10. placeholder="您的邮箱"
  11. form="register"
  12. autofocus
  13. />
  14. </section>
  15. </fieldset>
  16. <!-- 表单域分组2 -->
  17. <fieldset name="other" form="register">
  18. <legend>选填信息</legend>
  19. <section>
  20. <input
  21. type="text"
  22. name="nickname"
  23. placeholder="您的呢称"
  24. form="register"
  25. />
  26. </section>
  27. </fieldset>
  28. <button
  29. type="submit"
  30. form="register"
  31. formaction="register.php"
  32. formmethod="POST"
  33. formtarget="_blank"
  34. >
  35. 提交
  36. </button>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议