search

博客列表 >HTML基础，按钮，下拉表单，文本域

HTML基础，按钮，下拉表单，文本域

，多思曩惜，
，多思曩惜，原创
2020年04月07日 17:37:36525浏览

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>

-预览效果

上一条：css选择器的属性与用法以及伪类选择器的用法讲解下一条：【VM虚拟机】手把手教你使用VM安装Ubuntu
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多