简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >表单常用元素--Inupt、Datalist、Button、Textarea、Fieldset

表单常用元素--Inupt、Datalist、Button、Textarea、Fieldset

海阔天空
海阔天空原创
2020年04月05日 17:02:03959浏览

表单常用元素练习

效果图

代码如下：

  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>
上一条：0403表格和表单下一条：前端开发：表单2（重点）----按钮、下拉列表、文本域、分组
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多