search

博客列表 >HTML 表单中按钮、下拉列表、文本域、表单域的常用属性与事件

HTML 表单中按钮、下拉列表、文本域、表单域的常用属性与事件

晴天
晴天原创
2020年04月05日 16:49:031802浏览

1.按钮常用属性

1.1 常用属性

  • 按钮使用<button></button>标签
属性值 描述
type=”submit” 按钮类型为提交
formmothod=”POST” 提交类型为 POST
POST 在 HTML 主体中提交，不可见
formmothod=”GET” 提交类型为 GET
GET 在 url 中提交，显示为https://php.cn/zhuce.php?name=xxx&email=xxx
formtarget=”_blank” 设置在新窗口/本窗口提交
_blank 在新窗口打开，不写 target 默认为本窗口
formaction=”zhuce.php” 设置提交到哪里
  • 如果在<button></button>中设置 formmothod、formaction 属性及属性值
  • 那么<form></from>中的 mothod、action 属性及属性值失效

1.2 演示代码

  1. <h3>登陆/注册</h3>
  2. <form action="register" method="POST">
  3.   <section>
  4.     <label for="email">邮箱：</label>
  5.     <input type="email" id="email" name="email" required autofocus />
  6.   </section>
  7.   <section>
  8.     <label for="password">密码：</label>
  9.     <input type="password" id="password" name="password" required />
  10.   </section>
  11.   <section>
  12.     <button
  13.       type="submit"
  14.       formmothod="POST"
  15.       formtarget="_blank"
  16.       formaction="list.php"
  17.     >
  18.       登陆
  19.     </button>
  20.     <button
  21.       type="submit"
  22.       formmothod="GET"
  23.       formtarget="_blank"
  24.       formaction="zhuce.php"
  25.     >
  26.       注册
  27.     </button>
  28.   </section>
  29. </form>

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

2.1 常用属性

  • 下拉列表使用<select></select>标签
  • 用<option></option>写入数据内容
  • 用<optgroup></optgroup>给数据内容分组
  1. <form action="">
  2.   <select name="lang" id="lang" size="8" multiple>
  3.     <optgroup label="前端">
  4.       <option value="HTML5">HTML5</option>
  5.       <option value="CSS3">CSS3</option>
  6.       <option value="JaveScript">JaveScript</option>
  7.     </optgroup>
  8.     <optgroup label="后端">
  9.       <option value="PHP">PHP</option>
  10.       <option value="MySQL">MySQL</option>
  11.       <option value="Laravel">Laravel</option>
  12.     </optgroup>
  13.   </select>
  14. </form>
属性 描述
select 中的 size 列表显示长度
select 中的 multiple 是否多选
optgroup 中的 label 分组名
option 中的 value=”HTML5” 列表值
  • 可以使用属性selected设置下拉列表默认值
     
  • <option></option>中的文字内容可以加到属性 label 中
     

  • 例如

    • 原代码<option value="HTML5">HTML5</option>
    • 修改后<option value="HTML5" label="HTML5"></option>

  • 建议使用后者，后期我们使用 JavaScript 来处理的时候非常方便，且更加安全。

2.2 常用事件

<select></select>常用两大 js 事件属性

  • onchange = " "

    • 当选项值被改变时触发

    • 演示 <select name="lang" id="lang" onchange="alert(this.value)" ></select>

  • onclick = " "

    • 当选项被单击时触发

    • 演示 <select name="lang" id="lang" onclick="alert(this.value)" ></select>

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

3.1 常用属性

  • 以后开发过程中会用到副文本的编辑器，比如写个后台，肯定要允许用户去登陆去发文章，发文章就涉及到文本域。

  • 文本域标签为<textarea></textarea>

    • 标签属性介绍
属性 描述
cols 行值
rows 列值
min 最小字数
max 最大字数
placeholder 提示
  • 注意：<textarea></textarea>起始标签与结束标签之间不要留值，有值则不显示 placeholder 值
  1. <form id="common">
  2.   <textarea
  3.     name="replay"
  4.     cols="30"
  5.     rows="10"
  6.     min="5"
  7.     max="50"
  8.     placeholder="不超过50个字"
  9.   ></textarea>
  10.   <button>提交</button>
  11. </form>

3.2 常用事件

  • 跟下拉列表的常用事件相同

  • 另外还有一个事件为onselect

    • 文本被选中时触发，改变字体颜色
  1. <textarea
  2.   name="replay"
  3.   cols="30"
  4.   rows="10"
  5.   min="5"
  6.   max="50"
  7.   placeholder="不超过50个字"
  8.   onselect="this.style.color='red'"
  9. ></textarea>
  10. <!--字体被选中时，变成红色-->

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

  • 设计非常复杂数据时使用

  • 它们相当于一个容器，该元素本身不参与数据的交互操作。

  • 使用<fieldset></fieldset>标签

    • 在上面标签中添加<legend></legend>给分组元素设置名称
  1. <form action="" id="register"></form>
  2. <!--第一个表单分组-->
  3. <fieldset name="base" form="register">
  4.   <legend>基础信息</legend>
  5.   <section>
  6.     <input
  7.       type="email"
  8.       name="email"
  9.       form="register"
  10.       antofocus
  11.       placeholder="您的邮箱"
  12.     />
  13.   </section>
  14.   <section>
  15.     <input
  16.       type="password"
  17.       name="password1"
  18.       form="register"
  19.       placeholder="您的密码"
  20.     />
  21.   </section>
  22.   <section>
  23.     <input
  24.       type="password"
  25.       name="password2"
  26.       form="register"
  27.       placeholder="重复密码"
  28.     />
  29.   </section>
  30. </fieldset>

5.文件域

  • 文件域是用来上传文件的。通过前端表单将一个文件上传到服务器上。
  1. <section>
  2.     <label for="userpic" >头像：</label>
  3.     <input type="file" name="user_pic" id="userpic">
  4.     <!--file:文件类型。name这里一定要用下划线，链接线在PHP中是非法的。-->
  5.     <!--我们在上传的时候，可以将文件大小限制一下，用隐藏域，
  6.     类型为hidden 在页面中看不到的，给服务器端脚本看
  7.     -->
  8.     <input type="hidden" name="MAX_FILE_SIZE" value="8388608">
  9.     <!--MAX_FILE_SIZE:文件最大尺寸，8M=8388608 -->
  10. </section>

6.预定义复合框

  • 比如搜索引擎中的智能联想，下拉框中预制一些查询结果。
  1. <section>
  2.   <label for="course">课程</label>
  3.   <input type="text" id="course" name="course" list="courses" />
  4.   <datalist id="courses">
  5.     <option value="HTML/CSS开发与实战"></option>
  6.     <option value="JaveScript开发与实战"></option>
  7.     <option value="PHP开发与实战"></option>
  8.     <option value="Laravel开发与实战"></option>
  9.   </datalist>
  10. </section>

7.图像域

  • 不常用,将按钮用图片表示

  • 类型为 image

8.input 数字

<input type="number" name="age" min="18" max="60" step="5" id="age" form="" value="20" >

属性值 描述
type=”number” 类型为数字
min=”18” 数字最小值为 18
max=”60” 数字最大值为 60
value=”20” 默认值为 20
step=”5” 每次递增值为 5

9.一个完整的 input 提交表单

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>用户调查表</title>
  7.     <style>
  8.       body {
  9.         background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586078385325&di=0dbd43617eb63631da0ea3f868c5a909&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F20%2F160858yk1tq9ff1fz3i5zw.jpg);
  10.         background-size: 100% 1024px;
  11.         display: grid;
  12.         row-gap: 15px;
  13.       }
  14.       fieldset {
  15.         width: 40%;
  16.         margin: auto;
  17.         color: lightseagreen;
  18.         border-radius: 6px;
  19.         border: 2px solid lightseagreen;
  20.       }
  22.       fieldset:hover {
  23.         background-color: lightcyan;
  24.       }
  26.       fieldset > section {
  27.         font-weight: bolder;
  28.         margin-left: 10%;
  29.         margin-top: 20px;
  30.         display: grid;
  31.         grid-template-columns: repeat(3, 1fr);
  32.         column-gap: 15px;
  33.       }
  34.       fieldset > legend {
  35.         text-align: center;
  36.         font-size: 30px;
  37.       }
  39.       input {
  40.         border: none;
  41.         outline: none;
  42.         border-bottom: 1px solid #666;
  43.         background-color: transparent;
  44.       }
  46.       button {
  47.         width: 120px;
  48.         height: 30px;
  49.         border: none;
  50.         outline: none;
  51.         border-radius: 6px;
  52.         background-color: lightseagreen;
  53.         color: white;
  54.       }
  56.       button:hover {
  57.         background-color: darkorchid;
  59.         cursor: pointer;
  60.       }
  61.       section {
  62.         margin: auto;
  63.       }
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <!-- 先给个标题 -->
  68.     <header
  69.       style="
  70.         color: seashell;
  71.         font-size: 2rem;
  72.         text-align: center;
  73.         margin-top: 10px;
  74.       "
  75.     >
  76.       用 户 登 录 或 注 册
  77.     </header>
  78.     <!-- 创建表单 -->
  79.     <form action="" id="stat"></form>
  80.     <!-- 进行表单分组 -->
  81.     <!-- 基本信息 必填项 -->
  82.     <fieldset name="best" form="stat">
  83.       <legend>基本信息</legend>
  84.       <!-- 用户名 -->
  85.       <section>
  86.         <label for="username">用户名：</label>
  87.         <input
  88.           type="text"
  89.           id="username"
  90.           form="stat"
  91.           name="username"
  92.           maxlength="10"
  93.           minlength="4"
  94.           placeholder="请输入4-10位长度用户名"
  95.           required
  96.           autofocus
  97.         />
  98.       </section>
  99.       <!-- 密码 -->
  100.       <section>
  101.         <label for="password">密码：</label>
  102.         <input
  103.           type="password"
  104.           id="password"
  105.           name="password"
  106.           form="stat"
  107.           minlength="6"
  108.           maxlength="12"
  109.           placeholder="请输入6-12位长度密码"
  110.           required
  111.         />
  112.       </section>
  113.       <!-- 性别 -->
  114.       <section>
  115.         <label for="secret">性别：</label>
  116.         <div>
  117.           <input
  118.             type="radio"
  119.             name="gender"
  120.             id="male"
  121.             value="male"
  122.             form="stat"
  123.           />
  124.           <label for="male">男</label>
  125.           <input
  126.             type="radio"
  127.             name="gender"
  128.             id="female"
  129.             value="female"
  130.             form="stat"
  131.           />
  132.           <label for="female">女</label>
  133.           <input
  134.             type="radio"
  135.             name="gender"
  136.             id="secret"
  137.             value="secret"
  138.             form="stat"
  139.             checked
  140.           />
  141.           <label for="secret">保密</label>
  142.         </div>
  143.       </section>
  144.       <!-- 年龄 -->
  145.       <section>
  146.         <label for="age">年龄：</label>
  147.         <input
  148.           type="number"
  149.           name="age"
  150.           id="age"
  151.           min="18"
  152.           max="100"
  153.           value="20"
  154.           form="stat"
  155.         />
  156.       </section>
  157.       <!-- 兴趣 -->
  158.       <section>
  159.         <label for="travel">兴趣：</label>
  160.         <div>
  161.           <input
  162.             type="checkbox"
  163.             id="shoot"
  164.             name="hobby[]"
  165.             value="shoot"
  166.             form="stat"
  167.             checked
  168.           />
  169.           <label for="shoot">摄影</label>
  171.           <input
  172.             type="checkbox"
  173.             id="game"
  174.             form="stat"
  175.             name="hobby[]"
  176.             value="game"
  177.           />
  178.           <label for="game">游戏</label>
  180.           <input
  181.             type="checkbox"
  182.             id="programme"
  183.             name="hobby[]"
  184.             value="programme"
  185.             form="stat"
  186.             checked
  187.           />
  188.           <label for="programme">编程</label>
  190.           <input
  191.             type="checkbox"
  192.             form="stat"
  193.             id="travel"
  194.             name="hobby[]"
  195.             value="travel"
  196.           />
  197.           <label for="travel">旅游</label>
  198.         </div>
  199.       </section>
  200.       <!-- 头像 -->
  201.       <section>
  202.         <label for="image">头像</label>
  203.         <input id="image" type="file" form="stat" />
  204.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  205.       </section>
  206.       <!-- 邮箱 -->
  207.       <section>
  208.         <label for="email">邮箱：</label>
  209.         <input type="email" name="email" id="email" form="stat" />
  210.       </section>
  211.       <!-- 课程 -->
  212.       <section>
  213.         <label for="course">课程：</label>
  214.         <input
  215.           type="text"
  216.           id="course"
  217.           name="course"
  218.           list="courses"
  219.           form="stat"
  220.         />
  221.         <datalist id="courses">
  222.           <option value="HTML5 开发与实战"></option>
  223.           <option value="CSS3 开发与实战"></option>
  224.           <option value="JavaScript 开发与实战"></option>
  225.           <option value="PHP 开发与实战"></option>
  226.         </datalist>
  227.       </section>
  228.     </fieldset>
  229.     <!-- 其他信息 选填项 -->
  230.     <fieldset name="best" form="stat">
  231.       <legend>其他信息</legend>
  232.       <!-- 擅长领域 -->
  233.       <section>
  234.         <label for="good">擅长领域:</label>
  235.         <select name="good" id="good" form="stat">
  236.           <optgroup label="前端">
  237.             <option value="HTML5" label="HTML5"></option>
  238.             <option value="CSS3" label="CSS3"></option>
  239.             <option value="JavaScript" label="JavaScript"></option>
  240.           </optgroup>
  241.           <optgroup label="后端">
  242.             <option value="PHP" label="PHP"></option>
  243.             <option value="MySQL" label="MySQL"></option>
  244.             <option value="Laravel" label="Laravel"></option>
  245.           </optgroup>
  246.         </select>
  247.       </section>
  248.       <!-- 说点什么吧 -->
  249.       <section>
  250.         <label for="say">留言：</label>
  251.         <textarea
  252.           name="say"
  253.           id="say"
  254.           cols="30"
  255.           rows="10"
  256.           form="stat"
  257.           maxlength="50"
  258.           placeholder="说点什么吧...不超50字"
  259.         ></textarea>
  260.       </section>
  261.     </fieldset>
  262.     <!-- 提交按钮 提交方式 -->
  263.     <section>
  264.       <button form="stat" formaction="login.php" formmethod="GET">
  265.         本窗口get提交
  266.       </button>
  267.       <button
  268.         form="stat"
  269.         formaction="login.php"
  270.         formmethod="GET"
  271.         formtarget="_blank"
  272.       >
  273.         新窗口get提交
  274.       </button>
  275.       <button form="stat" formaction="login.php" formmethod="POST">
  276.         本窗口post提交
  277.       </button>
  278.       <button
  279.         form="stat"
  280.         formaction="login.php"
  281.         formmethod="POST"
  282.         formtarget="_blank"
  283.       >
  284.         新窗口post提交
  285.       </button>
  286.     </section>
  287.   </body>
  288. </html>
上一条：HTML 按钮、下拉列表、文本域、表单域下一条：HTML5表单知识点和实例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多