Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单常用元素--Inupt、Datalist、Button、Textarea、Fieldset
Blogger Information
Blog 19
fans 1
comment 0
visits 15273
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单常用元素--Inupt、Datalist、Button、Textarea、Fieldset
海阔天空
Original
968 people have browsed it

表单常用元素练习

效果图

代码如下：

  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>datalist表单元素示例</title>
  7.     <style>
  8.       form {
  9.         padding: 20px;
  10.         width: 400px;
  11.         box-shadow: 0 0 8px #888;
  12.         border-radius: 10px;
  13.         box-sizing: border-box;
  14.         margin: auto;
  15.         background-color: lightskyblue;
  16.         display: grid;
  17.         gap: 15px;
  18.       }
  20.       form > section {
  21.         display: grid;
  22.         grid-template-columns: 65px 1fr;
  23.       }
  25.       input[type="image"] {
  26.         justify-self: center;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <form
  32.       action=""
  33.       method="post"
  34.       enctype="application/x-www-form-urlencoded"
  35.       id="register"
  36.     >
  37.       <section>
  38.         <label for="textx">用户名：</label>
  39.         <input type="text" list="fruitsxx" id="textx" />
  40.         <datalist id="fruitsxx">
  41.           <option>admin</option>
  42.           <option>张三</option>
  43.           <option>李四</option>
  44.           <option>王五</option>
  45.           <option>赵六</option>
  46.         </datalist>
  47.       </section>
  48.       <section>
  49.         <label for="password">密码:</label>
  50.         <input type="password" name="password" id="password" required />
  51.       </section>
  52.       <section>
  53.         <label for="male">性别:</label>
  54.         <div>
  55.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  56.           <input type="radio" name="gender" id="male" value="male" /><label
  57.             for="male"
  58.             >男</label
  59.           >
  60.           <input
  61.             type="radio"
  62.             name="gender"
  63.             id="female"
  64.             value="female"
  65.             checked
  66.           /><label for="female">女</label>
  67.         </div>
  68.       </section>
  69.       <section>
  70.         <label for="programme">兴趣:</label>
  71.         <div>
  72.           <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  73.           <input type="checkbox" name="hobby[]" id="game" checked /><label
  74.             for="game"
  75.             >电玩</label
  76.           >
  77.           <input type="checkbox" name="hobby[]" id="basketball" checked /><label
  78.             for="basketball"
  79.             >篮球</label
  80.           >
  81.           <input type="checkbox" name="hobby[]" value="swim" id="swim" /><label
  82.             for="swim"
  83.             >游泳</label
  84.           >
  85.           <input
  86.             type="checkbox"
  87.             name="hobby[]"
  88.             value="programme"
  89.             id="programme"
  90.             checked
  91.           /><label for="programme">编程</label>
  92.         </div>
  93.       </section>
  94.       <section>
  95.         <label for="userpic">头像:</label>
  96.         <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
  97.         <input type="file" name="user_pic" id="userpic" />
  98.         <!-- 隐藏域: 限制上传文件大小不超过8M -->
  99.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  100.       </section>
  101.       <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
  102.       <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
  103.       <!-- multiple开启多选功能 -->
  104.       <!--onclick="alert('点击了'+this.value)"-->
  105.       <section>
  106.         <label for="home">籍贯：</label>
  107.         <select
  108.           name="jiguan"
  109.           id="home"
  110.           size="4"
  111.           multiple
  112.           onchange="alert(this.value)"
  113.         >
  114.           <optgroup label="山东">
  115.             <option value="济南">济南</option>
  116.             <option value="青岛" selected>青岛</option>
  117.             <option value="潍坊">潍坊</option>
  118.             <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
  119.             <option value="德州" label="德州"> </option
  120.             ><option value="威海" label="威海" disabled> </option
  121.           ></optgroup>
  123.           <optgroup label="河北">
  124.             <option value="石家庄" label="石家庄"> </option
  125.             ><option value="衡水" label="衡水"> </option
  126.             ><option value="沧州" label="沧州"> </option
  127.           ></optgroup>
  128.         </select>
  129.       </section>
  130.       <section>
  131.         <label for="jianli">简历：</label>
  132.         <!-- change:值改变时触发, select:选中文本时触发 -->
  133.         <textarea
  134.           name="reply"
  135.           id="jianli"
  136.           cols="30"
  137.           rows="10"
  138.           minlength="5"
  139.           maxlength="50"
  140.           placeholder="不超过50字符"
  141.           onchange="alert('内容改变了')"
  142.           onselect="this.style.color='red'"
  143.         ></textarea>
  144.         <!-- 动态设置处理脚本与请求类型 -->
  145.         <!-- <button
  146.           type="submit"
  147.           formaction="register.php"
  148.           formmethod="POST"
  149.           formtarget="_blank"
  150.         >
  151.           提交
  152.         </button> -->
  153.       </section>
  154.       <section>
  155.         <label for="colorx">颜色：</label>
  156.         <input type="color" list="colorsxx" id="colorx" />
  157.         <datalist id="colorsxx">
  158.           <option>#ff0000</option>
  159.           <option>#ee0000</option>
  160.           <option>#dd0000</option>
  161.           <option>#cc0000</option>
  162.           <option>#bb0000</option>
  163.         </datalist>
  164.       </section>
  166.       <section>
  167.         <label for="numberx">数值：</label>
  168.         <input
  169.           type="number"
  170.           min="0"
  171.           max="64"
  172.           step="2"
  173.           list="numbersxx"
  174.           id="numberx"
  175.         />
  177.         <datalist id="numbersxx">
  178.           <option>0</option>
  179.           <option>2</option>
  180.           <option>4</option>
  181.           <option>8</option>
  182.           <option>16</option>
  183.           <option>32</option>
  184.           <option>64</option>
  185.         </datalist>
  186.       </section>
  188.       <section>
  189.         <label for="urlx">URL：</label>
  190.         <input type="url" list="urlsxx" id="urlx" />
  191.         <datalist id="urlsxx">
  192.           <option>https://developer.mozilla.org</option>
  193.           <option>https://caniuse.com/</option>
  194.           <option>https://mozilla.com</option>
  195.           <option>https://mdn.github.io</option>
  196.           <option>https://www.youtube.com/user/firefoxchannel</option>
  197.         </datalist>
  198.       </section>
  199.       <section>
  200.         <label for="rangex">范围：</label>
  201.         <input type="range" min="0" max="64" list="numbersxx" id="rangex" />
  202.       </section>
  203.     </form>
  204.   </body>
  205. </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.     <style>
  8.       form {
  9.         padding: 20px;
  10.         width: 350px;
  11.         box-shadow: 0 0 8px #888;
  12.         border-radius: 10px;
  13.         box-sizing: border-box;
  14.         margin: auto;
  15.         background-color: lightskyblue;
  16.         display: grid;
  17.         gap: 15px;
  18.       }
  20.       form > section {
  21.         display: grid;
  22.         grid-template-columns: 60px 1fr;
  23.       }
  25.       h3 {
  26.         text-align: center;
  27.       }
  29.       /* section:last-of-type {
  30.         display: grid;
  31.         grid-template-columns: 1fr 1fr;
  32.         column-gap: 10px;
  33.       } */
  34.       section:last-child {
  35.         margin: 0 auto;
  36.       }
  37.       button {
  38.         height: 30px;
  39.         width: 50px;
  40.         border: none;
  41.         outline: none;
  42.       }
  44.       button:hover {
  45.         background-color: lightseagreen;
  46.         color: white;
  47.         cursor: pointer;
  48.       }
  49.     </style>
  50.   </head>
  52.   <body>
  53.     <h3>登录/注册</h3>
  54.     <form>
  55.       <section>
  56.         <label for="email">邮箱:</label>
  57.         <input type="email" name="email" id="email" required autofocus />
  58.       </section>
  60.       <section>
  61.         <label for="password">密码:</label>
  62.         <input type="password" name="password" id="password" required />
  63.       </section>
  65.       <section>
  66.         <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
  67.         <button
  68.           type="submit"
  69.           formaction="login.php"
  70.           formmethod="POST"
  71.           formtarget="_blank"
  72.         >
  73.           登录
  74.         </button>
  75.         <button
  76.           type="submit"
  77.           formaction="register.php"
  78.           formmethod="GET"
  79.           formtarget="_blank"
  80.         >
  81.           注册
  82.         </button>
  83.       </section>
  84.     </form>
  85.   </body>
  86. </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.     <style>
  8.       body {
  9.         width: 50%;
  10.         display: grid;
  11.         row-gap: 15px;
  12.         margin: auto;
  13.       }
  14.       fieldset {
  15.         color: lightseagreen;
  16.         border-radius: 6px;
  17.         border: 2px solid lightseagreen;
  18.       }
  20.       fieldset:hover {
  21.         background-color: lightcyan;
  22.       }
  24.       fieldset > section {
  25.         display: grid;
  26.         grid-template-columns: repeat(3, 1fr);
  27.         column-gap: 15px;
  28.       }
  29.       fieldset > legend {
  30.         text-align: center;
  31.       }
  33.       input {
  34.         border: none;
  35.         outline: none;
  36.         border-bottom: 1px solid #666;
  37.         /* 设置透明背景色 */
  38.         background-color: transparent;
  39.       }
  41.       button {
  42.         height: 30px;
  43.         border: none;
  44.         width: 60px;
  45.         margin: auto;
  46.         outline: none;
  47.         border-radius: 6px;
  48.         background-color: lightseagreen;
  49.         color: white;
  50.       }
  52.       button:hover {
  53.         background-color: darkorchid;
  55.         cursor: pointer;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <!-- 提交设置通过<button>元素完成 -->
  61.     <form action="" id="register"></form>
  63.     <!-- 表单域分组1 -->
  64.     <fieldset name="base" form="register">
  65.       <legend>基本信息</legend>
  66.       <section>
  67.         <input
  68.           type="email"
  69.           name="email"
  70.           placeholder="您的邮箱"
  71.           form="register"
  72.           autofocus
  73.         />
  74.         <input
  75.           type="password"
  76.           name="psw1"
  77.           placeholder="您的密码"
  78.           form="register"
  79.         />
  80.         <input
  81.           type="password"
  82.           name="psw2"
  83.           placeholder="重复密码"
  84.           form="register"
  85.         />
  86.       </section>
  87.     </fieldset>
  89.     <!-- 表单域分组2 -->
  90.     <fieldset name="other" form="register">
  91.       <legend>选填信息</legend>
  92.       <section>
  93.         <input
  94.           type="text"
  95.           name="nickname"
  96.           placeholder="您的呢称"
  97.           form="register"
  98.         />
  99.         <input
  100.           type="number"
  101.           name="age"
  102.           min="10"
  103.           max="70"
  104.           step="1"
  105.           form="register"
  106.           placeholder="您的年龄"
  107.         />
  108.         <input type="url" name="site" placeholder="个人站点" form="register" />
  109.       </section>
  110.     </fieldset>
  112.     <button
  113.       type="submit"
  114.       form="register"
  115.       formaction="register.php"
  116.       formmethod="POST"
  117.       formtarget="_blank"
  118.     >
  119.       提交
  120.     </button>
  121.   </body>
  122. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：作业总结呢?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post