search

博客列表 >HTML元素中按钮、下拉列表、文本域、表单域的属性小结

HTML元素中按钮、下拉列表、文本域、表单域的属性小结

马晓宁
马晓宁原创
2020年04月05日 10:31:20964浏览

一.按钮元素

Button：元素表示一个可点击的按钮。不同的按钮可以做出不同的请求类型。

1.属性

序号 属性 描述
1 name 名称，与表单数据一起提交。
2 type button的类型。可选值： submit ， reset ，menu，button
3 value button的初始值。它定义的值与表单数据的提交按钮相关联。
4 disabled 属性表示用户不能用
5 form 表示button元素关联的form元素（它的表单拥有者）
6 formaction 表示程序处理button提交信息的URI

2.示例

  1. <body>
  2.       <h3>登录/注册</h3>
  3.       <form action="register.php" method="post">
  4.         <section>
  5.           <label for="userphone">手机号:</label>
  6.           <input type="text" name="userphone" id="userphone" required autofocus />
  7.         </section>
  8.         <section>
  9.           <label for="password">密码:</label>
  10.           <input type="password" name="password" id="password" required />
  11.         </section>
  12.         <section>
  13.           <button
  14.             type="submit"
  15.             formaction="login.php"
  16.             formmethod="POST"
  17.             formtarget="_blank"
  18.           >
  19.             登录
  20.           </button>
  21.           <button
  22.             type="submit"
  23.             formaction="register.php"
  24.             formmethod="GET"
  25.             formtarget="_blank"
  26.           >
  27.             注册
  28.           </button>
  29.         </section>
  30.       </form>
  31.     </body>

二.下拉列表元素

Select:元素表示一个控件，提供一个选项菜单。

1.属性

序号 属性 描述
1 autocomplete 提供用户代理自动完成功能的提示
2 autofocus 让一个对象在页面加载的时候获得焦点. 在一个页面上下文中, 只有一个对象可以有这个属性
3 disabled 表明一个用户是否可以操控该表单对象.
4 form 所关联的form表单 (它的”表单拥有者”)
5 multiple 标记select是否可以多选. 默认是单选.
6 name 控件名称
7 required 规定select的值不能为空
8 size 控件显示为滚动列表框，则此属性表示为控件中同时可见的行数。

2.事件属性

序号 属性 描述
1 onchange 当选项值发生变化时才会触发
2 onclick 点击就会触发(选项值可以不改变)

3.示例

  1. <body>
  2.     <form action="">
  3.       <select
  4.         name="lang"
  5.         id="lang"
  6.         size="8"
  7.         multiple
  8.         onchange="alert(this.value)"
  9.         <!--当值方式改变触发-->
  10.         onclick="alert(this.value)"
  11.         <!--点击时触发-->
  12.       >
  13.         <optgroup label="内科">
  14.           <option value="心内科">心内科</option>
  15.           <option value="内一科" selected>内一科</option>
  16.           <option value="内二科" disabled>内二科</option>
  17.           <option value="消化科" label="消化科"> </option
  18.           ><option value="内分泌科" label="内分泌科"> </option
  19.         ></optgroup>
  21.         <optgroup label="外科">
  22.           <option value="普通外科" label="普通外科"> </option
  23.           ><option value="心脏外科" label="心脏外科"> </option
  24.           ><option value="血管外科" label="血管外科"> </option
  25.         ></optgroup>
  26.         </select>
  27.       </form>
  28.  </body>

三.文本域元素

textarea :元素表示一个多行纯文本编辑控件。

1.属性

序号 属性 描述
1 autocomplete 是否使用浏览器的记忆功能自动填充文本。值：on, off
2 autofocus 页面加载完毕之后是否自动给本元素添加焦点。
3 cols 文本域的可视宽度。必须为正数，默认为20
4 disabled 禁用文本域。默认为false。
5 form 指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。
6 maxlength 允许用户输入的最大字符长度 。未指定表示无限长度。
7 minlength 允许用户输入的最小字符长度
8 name 元素的名称
9 placeholder 向用户提示可以在控件中输入的内容。
10 readonly 不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。
11 required 提示用户这个元素的内容必填。
12 rows 元素的输入文本的行数（显示的高度）。

3.示例

  1. <body>
  2.     <form action="" id="common"></form>
  3.     <textarea
  4.       name="reply"
  5.       id=""
  6.       cols="30"
  7.       rows="10"
  8.       minlength="5"
  9.       maxlength="50"
  10.       form="common"
  11.       placeholder="不超过50字符"
  12.       <!--向用户提示可以在控件中输入的内容。-->
  13.     >
  14.     <button
  15.       type="submit"
  16.       form="common"
  17.       formaction="register.php"
  18.       formmethod="POST"
  19.     >
  20.       提交
  21.     </button>
  22. </body>

四.表单域

fieldset：元素通常用来对表单中的控制元素进行分组

1.属性

序号 属性 描述
1 disabled 规定应该禁用 fieldset。
2 form 规定 fieldset 所属的一个或多个表单。
3 name 规定 fieldset 的名称。

2.示例

  1. <body>
  2.     <form action="" id="register"></form>
  3.     <fieldset name="base" form="register">
  4.       <legend>基本信息</legend>
  5.       <section>
  6.         <input
  7.           type="text "
  8.           name="userphone"
  9.           placeholder="手机号码"
  10.           form="register"
  11.           autofocus
  12.         />
  13.         <input
  14.           type="password"
  15.           name="psw1"
  16.           placeholder="您的密码"
  17.           form="register"
  18.         />
  19.         <input
  20.           type="password"
  21.           name="psw2"
  22.           placeholder="重复密码"
  23.           form="register"
  24.         />
  25.       </section>
  26.     </fieldset>
  27.     <fieldset name="other" form="register">
  28.       <legend>选填信息</legend>
  29.       <section>
  30.         <input
  31.           type="text"
  32.           name="nickname"
  33.           placeholder="您的呢称"
  34.           form="register"
  35.         />
  36.         <input type="number" name="age" min="10" max="70" step="1"
  37.         form="register" / placeholder="您的年龄"> <input type="text"
  38.         name="hobby" placeholder="爱好"" form="register" />
  39.       </section>
  40.     </fieldset>
  42.     <button
  43.       type="submit"
  44.       form="register"
  45.       formaction="register.php"
  46.       formmethod="POST"
  47.       formtarget="_blank"
  48.     >
  49.       提交
  50.     </button>
  51.   </body>

上一条：html基础知识表单与控件元素、基础按钮元素、基础下拉列表元素、多行文本域元素、表单域分组元素下一条：表单与控件元素（按钮常用属性、下拉列表常用属性、文件域常用属性、表单域分组元素常用属性）0404
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多