简体中文（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

博客列表 >html 输入框、多选框、注册框、表单域、文本域、学习

html 输入框、多选框、注册框、表单域、文本域、学习

w™下載一個妳
w™下載一個妳原创
2020年04月05日 15:15:381340浏览

4/4学习内容

1.用户注册框、输入框、多选框

  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.       input[type="image"] {
  30.         justify-self: center;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <h3>用户注册</h3>
  36.     <form action="login.php" id="register"  method="POST">
  37.       <!-- 单行文本输入框 -->
  38.       <section>
  39.         <label for="username">用户名:</label>
  40.         <!-- 必选且自动获取焦点 -->
  41.         <input
  42.           type="text"
  43.           name="username"
  44.           id="username"
  45.           maxlength="20"
  46.           placeholder="不少于6位"
  47.           required
  48.           autofocus
  49.         />
  50.       </section>
  52.       <!-- 密码输入框 -->
  53.       <section>
  54.         <label for="password">密码:</label>
  55.         <input
  56.           type="password"
  57.           name="password"
  58.           id="password"
  59.           size="10"
  60.           placeholder="不少于8位"
  61.           required
  62.         />
  63.       </section>
  65.       <!-- 单选框 -->
  66.       <section>
  67.         <label for="secret">性别:</label>
  68.         <div>
  69.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  70.           <input type="radio" name="gender" id="male" value="male" /><label
  71.             for="male"
  72.             >男</label
  73.           >
  74.           <input type="radio" name="gender" id="female" value="female" /><label
  75.             for="male"
  76.             >女</label
  77.           >
  78.           <!-- checked: 默认选项 -->
  79.           <input
  80.             type="radio"
  81.             name="gender"
  82.             id="secret"
  83.             value="female"
  84.             checked
  85.           /><label for="secret">保密</label>
  86.         </div>
  87.       </section>
  88.       <section>
  89.         <label for="programme">兴趣</label>
  90.         <div class="box">
  91.           <input type="checkbox" name="hobby"[]  id="game" value="game"checked/>
  92.         </label for="">游戏</label>
  94.         <input type="checkbox" name="hobby"[]   id="trave" value="trave"/>
  95.     </label for="">旅游</label>
  97.          <input type="checkbox" name="hobby"[]  id="shoot"  value="shoot"/>
  98.          <label for="">摄影</label>
  100.          <input type="checkbox" name="hobby"[]  id="programme " value="programme "checked/>
  101.          <label for="">编程</label>
  102. </div>
  103. </section>
  104.              <!-- 文件域 -->
  105.       <section>
  106.         <label  for="wserpic">头像：</label>
  107.         <input type="file" name="user_pic" id="userpic"/>
  108.               <!-- 隐藏域 -->
  109.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608"/>
  110.       </section>
  111.            <!-- 预定义复合框 -->
  112.       <section>
  113.         <label  for="course">课程：</label>
  114.         <input type="text" name="course" list="course"/>
  115.         <datalist id="course">
  116.           <option value="HTML/CSS开发与实战"></option>
  117.           <option value="Javascript开发与实战"></option>
  118.           <option value="PHP开发与实战"></option>
  119.           <option value="Laravel开发与实战"></option>
  120.         </datalist>
  121.         </section>
  123.         <!-- 图像域 -->
  124.           <input type="image"  name="submit" src="/images/a.png" width="50" height="20"/>    
  125.       </form>
  126.       <hr/>
  127.       <label for="email">邮箱：</label>
  128.         <input type="email" name="email" id="email" form="register" />
  129.         <label for="age">年龄：</label>
  130.         <input type="number" name="age" min="18" max="60"  step="5" id="age" form="register" value="20" />
  131.   </body>
  132. </html>

2.按钮、下拉列表

  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 08px #888;
  12.         border-radius: 10px;
  13.         box-sizing: border-box;
  14.         margin: auto;
  15.         background-color: lightblue;
  16.         display: grid0\;
  17.         gap:15px;
  18.       }
  19.       form > section {
  20.          display: grid;
  21.          grid-template-columns: 60px 1fr;
  22.       }
  23.       h3 {
  24.         text-align: center;
  25.       }
  26.       section:last-of-type {
  27.         display: grid;
  28.         grid-template-columns: 1fr 1fr;
  29.         column-gap: 10px;
  30.       }
  31.       button {
  32.         height: 30px;
  33.         border:none；
  34.         outline:none；
  35.       }
  36.       button:hover {
  37.         background-color: lightseagreen;
  38.         color: white;
  39.         cursor: pointer;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <h3>登录/注册</h3>
  45.     <form action="register.php" method="POST">
  46.       <section>
  47.         <label for="email">邮箱：</label>
  48.         <input type="email" id="email" name="email" required autofocus />
  49.       </section>
  50.       <section>
  51.         <label for="password">密码：</label>
  52.         <input type="password" id="password" name="password" required />
  53.       </section>
  54.       <section>
  55.         <button formaction="login.php" formmethod="POST" fommtarget="_blank">
  56.           登录
  57.         </button>
  58.         <button formaction="register.php" formmethod="GET" fommtarget="_blank">
  59.           注册
  60.         </button>
  61.       </section>
  62.       <select name="lang" id="lang">
  63.         <optgroup label="前端">
  64.           <option value="html5" label="HTML5"></option>
  65.           <option value="css3" label="CSS3"></option>
  66.           <option value="javascript" label="javascript"></option>
  67.         </optgroup>
  68.         <optgroup label="后端">
  69.           <option value="php" label="php" selected></option>
  70.           <!--添加selected为默认选中此项-->
  71.           <option value="mysql" label="mysql"></option>
  72.           <option value="laravel" label="laravel"></option>
  73.         </optgroup>
  74.       </select>
  75.     </form>
  76.   </body>
  77. </html>

3.文本域

  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: 80%;
  10.         margin: auto;
  11.         display: grid;
  12.         row-gap: 15px;
  13.       }
  14.       button {
  15.         height: 30px;
  16.         border: none;
  17.         outline: none;
  18.         background-color: lightseagreen;
  19.         color: white;
  20.       }
  21.       button:hover {
  22.         background: blueviolet;
  23.         cursor: pointer;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <!-- 默认30列10行最小5个字符、最大50字符 <textarea name="replay" cols="30" rows="10" minlength="5" -->
  29.     <form action="" id="common"></form>
  30.     <textarea
  31.       name="replay"
  32.       cols="30"
  33.       rows="10"
  34.       milength="5"
  35.       maxlength="50"
  36.       form="common"
  37.       placeholder="不超过50个字"
  38.     ></textarea>
  39.     <button
  40.       type="submit"
  41.       form="common"
  42.       formaction="register.php"
  43.       formmethod="post"
  44.     >
  45.       提交
  46.     </button>
  47.   </body>
  48. </html>

4.文本域常用属性

序号 属性 描述
1 cols 文本域可视宽度
2 rows 文本域可输入的行数
3 name 文本域参数名称
4 form 绑定所属表单元素
5 minlength 允许输入最小字符长度
6 maxlength 允许输入最大字符长度
7 maxlength 允许输入最大字符长度
8 placeholder 提示信息占位符
9 wrap 换行方式:hard/soft默认
10 disabled 禁用(布尔属性)
11 autofocus 自动获取焦点(布尔属性)
12 autocomplete 自动完成(布尔属性)

5.事件属性

序号 事件 描述
1 onclick 点击时触发
2 onchange 文本被修改时触发
3 onselect 文本被选中时触发

提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值

6 <option>属性

序号 属性 描述
1 value 请求参数的值
2 label 默认选项文本值
3 selected 是否选中(布尔属性)
3 disabled 是否禁用(布尔属性)

7 <select>事件属性

序号 事件属性 描述
1 onchange 当下拉列表选项值发生变化时才会触发
2 onclick 只要点击就会触发(选项值可以不改变)
上一条：html常用表单元素属性下一条：我的第一课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多