search

博客列表 >表单学习总结

表单学习总结

麦穗
麦穗原创
2020年04月05日 19:49:23609浏览

按钮常用属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="width=
  8.     , initial-scale=1.0"
  9.     />
  10.     <title>按钮常用属性</title>
  11.   </head>
  12.   <body>
  13.     <form action="login.php" id="rege">
  14.       <section>
  15.         <label for="username">用户名：</label>
  16.         <input
  17.           type="username"
  18.           id="username"
  19.           name="username"
  20.           placeholder="不少于6位"
  21.           autofocus
  22.           required
  23.         />
  24.       </section>
  25.       <section>
  26.         <label for="password">密码：</label>
  27.         <input
  28.           type="password"
  29.           id="password"
  30.           name="password"
  31.           placeholder="不少于6位"
  32.           required
  33.         />
  34.       </section>
  35.       <section>
  36.         <button form="rege" formmethod="GET" formtarget="_blank">提交</button>
  37.       </section>
  38.     </form>
  39.   </body>
  40. </html>
  • 显示按钮界面
  • 显示按钮效果

    -

下拉列表常用属性和事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>下拉列表的常用属性</title>
  7.   </head>
  8.   <body>
  9.     <form action="">
  10.       <select
  11.         name="lang"
  12.         onclick="alert(this.value)"
  13.         onchange="alert(this.value)"
  14.         multiple
  15.       >
  16.         <optgroup label="科目">
  17.           <option value="ch">语文</option>
  18.           <option value="ms">数学</option>
  19.           <option value="en" selected>英语</option>
  20.         </optgroup>
  21.         <optgroup label="教师">
  22.           <option value="zs">张三</option>
  23.           <option value="ls">李四</option>
  24.           <option value="we">王二</option>
  25.         </optgroup>
  26.       </select>
  27.     </form>
  28.   </body>
  29. </html>
  • 显示下拉列表
  • 显示下拉列表多选（multiple）
  • 显示下拉列表预设选项(selected)
  • 显示下拉列表选项改变时显示选项(onchange)
  • 显示下拉列表点击选项时显示选项(onclick)

文本域常用属性和事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>文本域的属性</title>
  7.   </head>
  8.   <body>
  9.     <form action="login.php" method="POST" target="_blank">
  10.       <textarea
  11.         name="rtext"
  12.         placeholder="说明你要写的文字，不超过50字"
  13.         minlength="5"
  14.         maxlength="50"
  15.         cols="30"
  16.         rows="10"
  17.         onchange="alert('内容被修改！')"
  18.         onselect="this.style.color='green'"
  19.       >
  20. 请说明你要说的内容……</textarea
  21.       >
  22.       <button type="submit">提交</button>
  23.     </form>
  24.   </body>
  25. </html>
  • 显示文本域

  • 显示文本域改变内容时触发（onchange）

  • 显示文本内容改变时字体变绿（onselect）

表单域分组元素常用属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单的属性</title>
  7.   </head>
  8.   <body>
  9.     <form action="login.php">
  10.       <fieldset name="bese">
  11.         <legend>基本信息</legend>
  12.         <section>
  13.           <input type="email" name="email" placeholder="邮箱：" autofocus />
  14.           <input type="text" name="username" placeholder="用户名：" />
  15.           <input type="password" name="password" placeholder="密码：" />
  16.         </section>
  17.       </fieldset>
  18.       <button type="submit" formmethod="POST" formtarget="_blank">提交</button>
  19.     </form>
  20.   </body>
  21. </html>
  • 表单效果显示

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

相关文章

查看更多