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

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

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

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>
  48. <input
  49. type="email"
  50. name="email"
  51. placeholder="你的邮箱"
  52. form="register"
  53. autofocus
  54. />
  55. <input
  56. type="password"
  57. name="password1"
  58. placeholder="密码"
  59. form="register"
  60. />
  61. <input
  62. type="password"
  63. name="password2"
  64. placeholder="确认密码"
  65. form="register"
  66. />
  67. </fieldset>
  68. <!-- 第二个表单分组 -->
  69. <fieldset name="base" form="register">
  70. <legend>选填信息</legend>
  71. <input
  72. type="text"
  73. name="nickname"
  74. placeholder="你的名称"
  75. form="register"
  76. autofocus
  77. />
  78. <input type="number" name="age" placeholder="年龄" form="register" />
  79. </fieldset>
  80. <button type="reset" form="register">重置</button>
  81. <button
  82. type="submit"
  83. form="register"
  84. formaction="register.php"
  85. formmethod="POST"
  86. formtarget="_blank"
  87. >
  88. 提交
  89. </button>
  90. </body>
  91. </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. margin: 0 auto;
  10. row-gap: 15px;
  11. }
  12. fieldset {
  13. color: rgb(20, 20, 20);
  14. border-radius: 10px;
  15. border: 2px solid rgb(111, 161, 111);
  16. margin: 0 auto;
  17. width: 500px;
  18. text-align: center;
  19. }
  20. #replay {
  21. resize: none;
  22. }
  23. button {
  24. height: 30px;
  25. }
  26. #first {
  27. margin: 0 auto;
  28. margin-left: 20px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <form action="">
  34. <div>
  35. <div>
  36. <fieldset>
  37. <legend>个人信息</legend>
  38. <section>
  39. <label for="user">姓名:</label>
  40. <input type="text" id="user" name="user" required />
  41. <label for="phone">电话:</label>
  42. <input type="tel" id="phone" name="phone" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11"
  43. required />
  44. </section>
  45. </fieldset>
  46. <section>
  47. <fieldset>
  48. <legend>学习信息</legend>
  49. <section class="second" id="second">
  50. <div>
  51. <div>
  52. <label for="study">学习基础</label>
  53. <select name="lang" id="lang">
  54. <optgroup label="前端">
  55. <option value="html">html</option>
  56. <option value="css">css</option>
  57. <option value="javacsript">javascript</option>
  58. </optgroup>
  59. <optgroup>
  60. <option value="php" label="php"></option>
  61. <option value="java" label="java"></option>
  62. <option value="c##" label="c##"></option>
  63. </optgroup>
  64. </select>
  65. </div>
  66. <div class=".note">
  67. <textarea class="first" id="first" cols="30" rows="1" style="resize: none; "
  68. readonly> 结合自己实际情况做出选择</textarea>
  69. </div>
  70. </div>
  71. </section>
  72. </fieldset>
  73. </section>
  74. </div>
  75. <div>
  76. <fieldset>
  77. <legend>反馈</legend>
  78. <label for="">提出建议:</label>
  79. <section>
  80. <textarea name="replay" id="replay" cols="100" rows="10" maxlength="200" placeholder="不超过200字数"
  81. required></textarea>
  82. </section>
  83. </div>
  84. </fieldset>
  85. <div>
  86. <fieldset>
  87. <button type="reset">重置</button>
  88. <button type="submit" formaction="register.php" formmethod="POST" formtarget="_blank">提交</button>
  89. </fieldset>
  90. </div>
  91. </div>
  92. </form>
  93. </body>
  94. </html>

-预览效果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议