search

博客列表 >按钮、下拉列表、文本域、表单域分组属性

按钮、下拉列表、文本域、表单域分组属性

鹏建
鹏建原创
2020年04月05日 19:54:25537浏览
  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>Document</title>
  7.     <style>
  8.       button {
  9.         background-color: brown;
  10.         color: aqua;
  11.       }
  12.       button:hover {
  13.         color: yellow;
  14.       }
  15.       legend {
  16.         color: rgb(170, 19, 19);
  17.         font-size: 20px;
  18.         text-align: center;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <form action="" id="register">
  24.       <section>
  25.         <label for="userpic">头像</label>
  26.         <input type="file" name="user_pic" id="userpic" />
  27.       </section>
  28.       <section>
  29.         <input type="hidden" name="MAX_FILE_SIZE" value="38008" />
  30.       </section>
  31.       <section>
  32.         <label for="course">课程</label>
  33.         <input type="text" name="course" list="courses" />
  34.         <datalist id="courses">
  35.           <option value="html/css开发与实践"></option>
  36.           <option value="js开发与实践"></option>
  37.           <option value="php开发与实践"></option>
  38.           <option value="larave开发与实践"></option>
  39.         </datalist>
  40.       </section>
  41.       <section>
  42.         <input type="image" name="submit" src="play.jpg" width="100" />
  43.       </section>
  44.     </form>
  45.     <hr />
  46.     <fieldset>
  47.       <legend>选填信息</legend>
  48.       <section>
  49.         <label for="email">邮箱：</label>
  50.         <input type="email" name="email" id="email" form="register" />
  51.       </section>
  52.       <section>
  53.         <label for="age">年龄:</label>
  54.         <input
  55.           type="nubmer"
  56.           name="age"
  57.           id="age"
  58.           min="18"
  59.           max="50"
  60.           step="2"
  61.           form="register"
  62.         />
  63.       </section>
  64.     </fieldset>
  66.     <button formaction="login.php" formmethod="POST" formtarget="blank">
  67.       登录
  68.     </button>
  69.     <button formaction="register.php" formmethod="get" formtarget="self">
  70.       注册
  71.     </button>
  73.     <hr />
  75.     <form action="">
  76.       <select
  77.         name="course"
  78.         id="course"
  79.         size="4"
  80.         multiple
  81.         onchange="alert(this.value)"
  82.         onclick="alert(k考虑好了吗？)"
  83.       >
  84.         <optgroup label="前端">
  85.           <option value="html">html</option>
  86.           <option value="css">css</option>
  87.           <option value="js" selected>js</option>
  88.         </optgroup>
  89.         <optgroup label="后端">
  90.           <option value="php">php</option>
  91.           <option value="larave">larave</option>
  92.           <option value=""></option>
  93.         </optgroup>
  94.       </select>
  95.       留言板:<textarea
  96.         name="replay"
  97.         cols="30"
  98.         rows="10"
  99.         minlength="25"
  100.         maxlength="50"
  101.         placeholder="请留言"
  102.       >
  103.       </textarea>
  104.       <button type="submit">提交</button>
  105.     </form>
  106.   </body>
  107. </html>
上一条：MySQL优化下一条：表单学习总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多