简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML基础，按钮，下拉表单，文本域
Blogger Information
Blog 28
fans 0
comment 0
visits 25941
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
HTML基础，按钮，下拉表单，文本域
，多思曩惜，
Original
524 people have browsed it

HTML基础知识

按钮标签

  • <button>标签定义一个按钮
  • 在button元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间不同之处。
  • <button> 控件与<input type="button">相比，提供了更加强大的功能和更加丰富的内容。
  • button中常用的属性
属性 值 描述
autofocus autofocus 页面加载时按钮应当自动获得焦点
disabled disabled 规定应该禁止使用该按钮
form form_name 规定按钮属于一个或多个表单
formaction url 覆盖form元素的action元素
formenctype 覆盖form元素的enctype属性
formmethed GET PST 覆盖form元素的，method属性
formnovlidate formnovalidate 覆盖form元素的，novalidata属性
formtarget _blank _self _parent _top framename 覆盖form元素的target属性
name button_name 规定按钮的名称
type button reset submit 规定按钮的类型
value text 规定按钮的初始值，可有脚本进行修改 
  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: border-box;
  13.         margin: auto;
  14.         background-color: lightblue;
  15.         display: grid;
  16.         gap: 15px;
  17.       }
  18.       form > section {
  19.         display: grid;
  20.         grid-template-columns: 60px 1fr;
  21.       }
  22.       h3 {
  23.         text-align: center;
  24.       }
  25.       section:last-of-type {
  26.         display: grid;
  27.         grid-template-columns: 1fr 1fr;
  28.         column-gap: 10px;
  29.       }
  30.       button {
  31.         height: 30px;
  32.         border: none;
  33.         outline: none;
  34.       }
  35.       button:hover {
  36.         background-color: lightseagreen;
  37.         color: white;
  38.         cursor: pointer;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <h3>登录/注册</h3>
  44.     <form action="register.php" method="POST">
  45.       <section>
  46.         <label for="email">邮箱:</label>
  47.         <input type="email" id="email" name="email" required autofocus />
  48.       </section>
  49.       <section>
  50.         <label for="password">密码:</label>
  51.         <input type="password" id="password" name="password" required />
  52.       </section>
  53.       <section>
  54.         <button formaction="login.php" formmethod="POST" formtarget="_blank">
  55.           登录
  56.         </button>
  57.         <button formaction="register.php" formmethod="GET" formtarget="_blank">
  58.           注册
  59.         </button>
  60.       </section>
  61.     </form>
  62.   </body>
  63. </html>
  • 预览效果

下拉列表常用的属性和事件

  • selet 元素可有创建单选或多选菜单。
  • <select>元素中的<option>标签用于定义列表中的可用选项
属性 值 描述
autofocus autofous 规定在页面加载后文本域自动获得焦点
disabled disabled 规定禁用该下拉列表
form form_id 规定文本区域所属的一个或多个表单
multiple multiple 规定可选择多个选项
name name 规定下拉列表的名称
required required 规定文本区域是必填的
size number 规定下拉列表中可见选择的数目 
  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.         id="lang" >
  13.         <optgroup label="前端">
  14.           <option value="html5">HTML5</option>
  15.           <option value="css" selected>css</option>
  16.           <option value="javascript">javascript</option>
  17.         </optgroup>
  18.         <optgroup label="后端">
  19.           <option value="html5" label="HTML5"></option>
  20.           <option value="css" label="css"></option>
  21.           <option value="javascript" label="javascript"></option>
  22.           <option value="php" label="php"></option>
  23.         </optgroup>
  24.       </select>
  25.     </form>
  26.   </body>
  27. </html>
  • 预览

<textarea>标签文本域

  • <textarea> 标签定义多行的文本输入控件。
  • 文本区中可容纳无限数量的文本，其中文本的默认字体送等宽字体（通常是 Courier）。

  • 可以通过 cols 和 rows 属性来规定textarea 的尺寸，更好的方式是使用css中的height和 width属性。

  • <textarea>标签中常用的属性：

属性 值 描述
autofocus autofocus 规定在页面加载后获得焦点
cols number 规定文本区的可见宽度
disabled disabled 规定禁用该文本区
form form_id 规定文本域所属的一个或多个表单
maxlength maxlength 规定文本域的最大字符数
name name_of_textarea 规定文本区的名称
pholder text 预期值得简短提示
readonly readonly 规定文本区为只读
required required 规定文本域为必填的
rows number 规定文本区内的可见行数
wrop hard soft 规定当表单提交时文本如何换行 
  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-color: blueviolet;
  23.         cursor: pointer;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <form action="" id="common"></form>
  29.     <textarea
  30.       name="replay"
  31.       id=""
  32.       cols="30"
  33.       rows="10"
  34.       minlength="50"
  35.       form="common"
  36.       placeholder="不超过50字"
  37.       onselect="this.style.color = 'red'"
  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>
  • 预览效果

表单域分组

  • fieldset 元素可将表单内的相关元素分组
  • <fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段。

  • <legend>标签为fieldset元素定义标题

  • <fieldset>常用的属性

属性 值 描述
disabled disabled 规定应该兼用fieldset
form form_id 规定fieldset所属一个或多个表单
name value 规定fieldset的名称 
  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.         display: grid;
  10.         row-gap: 15px;
  11.       }
  12.       fieldset {
  13.         color: lightseagreen;
  14.         border-radius: 6px;
  15.         border: 2px solid lightseagreen;
  16.       }
  17.       fieldset:hover {
  18.         background-color: lightcyan;
  19.       }
  20.       fieldset > section {
  21.         display: grid;
  22.         grid-template-columns: repeat(3, 1fr);
  23.         column-gap: 15px;
  24.       }
  25.       fieldset > legend {
  26.         text-align: center;
  27.       }
  28.       input {
  29.         border: none;
  30.         outline: none;
  31.         border-bottom: 1px solid #666;
  32.         background-color: transparent;
  33.       }
  34.       button {
  35.         height: 30px;
  36.         border: none;
  37.         outline: none;
  38.         border-radius: 6px;
  39.         background-color: lightgreen;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <form action="" id="register"></form>
  45.     <!-- 第一个表单分组 -->
  46.     <fieldset name="base" form="register">
  47.       <legend>基本信息</legend>
  49.       <input
  50.         type="email"
  51.         name="email"
  52.         placeholder="你的邮箱"
  53.         form="register"
  54.         autofocus
  55.       />
  57.       <input
  58.         type="password"
  59.         name="password1"
  60.         placeholder="密码"
  61.         form="register"
  62.       />
  64.       <input
  65.         type="password"
  66.         name="password2"
  67.         placeholder="确认密码"
  68.         form="register"
  69.       />
  70.     </fieldset>
  71.     <!-- 第二个表单分组 -->
  72.     <fieldset name="base" form="register">
  73.       <legend>选填信息</legend>
  75.       <input
  76.         type="text"
  77.         name="nickname"
  78.         placeholder="你的名称"
  79.         form="register"
  80.         autofocus
  81.       />
  83.       <input type="number" name="age" placeholder="年龄" form="register" />
  84.     </fieldset>
  85.     <button type="reset" form="register">重置</button>
  86.     <button
  87.       type="submit"
  88.       form="register"
  89.       formaction="register.php"
  90.       formmethod="POST"
  91.       formtarget="_blank"
  92.     >
  93.       提交
  94.     </button>
  95.   </body>
  96. </html>
  • 预览效果

自我总结

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>自我总结</title>
  8.   <style>
  9.     #body {
  10.       margin: 0 auto;
  11.       row-gap: 15px;
  13.     }
  15.     fieldset {
  16.       color: rgb(20, 20, 20);
  17.       border-radius: 10px;
  18.       border: 2px solid rgb(111, 161, 111);
  19.       margin: 0 auto;
  20.       width: 500px;
  21.       text-align: center;
  22.     }
  24.     #replay {
  25.       resize: none;
  26.     }
  28.     button {
  29.       height: 30px;
  30.     }
  34.     #first {
  35.       margin: 0 auto;
  36.       margin-left: 20px;
  38.     }
  39.   </style>
  40. </head>
  42. <body>
  43.   <form action="">
  44.     <div>
  45.       <div>
  46.         <fieldset>
  47.           <legend>个人信息</legend>
  48.           <section>
  49.             <label for="user">姓名:</label>
  50.             <input type="text" id="user" name="user" required />
  51.             <label for="phone">电话:</label>
  52.             <input type="tel" id="phone" name="phone" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11"
  53.               required />
  54.           </section>
  55.         </fieldset>
  56.         <section>
  57.           <fieldset>
  58.             <legend>学习信息</legend>
  59.             <section class="second" id="second">
  60.               <div>
  61.                 <div>
  62.                   <label for="study">学习基础</label>
  63.                   <select name="lang" id="lang">
  64.                     <optgroup label="前端">
  65.                       <option value="html">html</option>
  66.                       <option value="css">css</option>
  67.                       <option value="javacsript">javascript</option>
  68.                     </optgroup>
  69.                     <optgroup>
  70.                       <option value="php" label="php"></option>
  71.                       <option value="java" label="java"></option>
  72.                       <option value="c##" label="c##"></option>
  73.                     </optgroup>
  74.                   </select>
  75.                 </div>
  76.                 <div class=".note">
  77.                   <textarea class="first" id="first" cols="30" rows="1" style="resize: none; "
  78.                     readonly> 结合自己实际情况做出选择</textarea>
  79.                 </div>
  80.               </div>
  81.             </section>
  82.           </fieldset>
  83.         </section>
  84.       </div>
  85.       <div>
  86.         <fieldset>
  87.           <legend>反馈</legend>
  89.           <label for="">提出建议：</label>
  90.           <section>
  91.             <textarea name="replay" id="replay" cols="100" rows="10" maxlength="200" placeholder="不超过200字数"
  92.               required></textarea>
  93.           </section>
  94.       </div>
  95.       </fieldset>
  96.       <div>
  97.         <fieldset>
  98.           <button type="reset">重置</button>
  99.           <button type="submit" formaction="register.php" formmethod="POST" formtarget="_blank">提交</button>
  100.         </fieldset>
  101.       </div>
  102.     </div>
  103.   </form>
  104. </body>
  105. </html>

-预览效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！