Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML基础之表单控件
Blogger Information
Blog 36
fans 0
comment 0
visits 29143
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基础之表单控件
小程_武汉_214945
Original
683 people have browsed it

HTML 按钮

  • 按钮有两种创建方法，使用<button>标签的方法较为常见
方法 button input
示例 <button type="submit">提交</button> <input type="button" value="提交">
  • button 标签的常用属性
属性 意义
name 按钮名称
type 按钮类型
value 按钮初始值
form 将按钮与表单绑定
formaction 覆盖表单的 action 属性
formmethod 覆盖表单的 method 属性
formtarget 覆盖表单的 target 属性
  • 代码示例
  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.     <h3>登录表单</h3>
  10.     <form action="" method="POST">
  11.       <section>
  12.         <label for="email">邮箱:</label>
  13.         <input
  14.           type="email"
  15.           name="email"
  16.           id="email"
  17.           required
  18.           autofocus
  19.           placeholder="请输入邮箱"
  20.         />
  21.       </section>
  22.       <section>
  23.         <label for="passwore">密码:</label>
  24.         <input
  25.           type="password"
  26.           name="password"
  27.           id="password"
  28.           required
  29.           placeholder="请输入密码"
  30.         />
  31.       </section>
  32.       <button formaction="post.php" formmethod="post" formtarget="_blank">
  33.         登录
  34.       </button>
  35.       <button formaction="register.php" formmethod="post" formtarget="_blank">
  36.         注册
  37.       </button>
  38.     </form>
  39.   </body>
  40. </html>

点击预览

下拉列表

  • 下拉列表使用<selsct> <option> <optgroup>标签生成

  • 代码示例

  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 name="class" id="class">
  11.         <optgroup label="文科">
  12.           <option value="zheng">政治</option>
  13.           <option value="li" selected>历史</option>
  14.           <option value="di">地理</option>
  15.         </optgroup>
  16.         <optgroup label="理科">
  17.           <option value="wu">物理</option>
  18.           <option value="hua">化学</option>
  19.           <option value="sheng">生物</option>
  20.         </optgroup>
  21.       </select>
  22.     </form>
  23.   </body>
  24. </html>

点击预览

文本域

  • 文本域使用<textarea>标签生成
  • 文本域的常用属性
属性 含义
name 名称
id id
rows 文本域列数
cols 文本域行数
minlength 最短输入长度
maxlength 最长输入长度
placeholder 预留信息
readonly 文本域只读
  • 代码预览
  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="" id="common">
  10.       <label for="replay">文本域</label>
  11.       <textarea
  12.         name="replay"
  13.         id="replay"
  14.         cols="30"
  15.         rows="10"
  16.         minlength="10"
  17.         maxlength="50"
  18.         placeholder="不超过50字"
  19.       ></textarea>
  20.       <button type="submit">提交</button>
  21.     </form>
  22.   </body>
  23. </html>

点击预览

表单域

  • 表单域使用<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.   </head>
  8.   <body>
  9.     <h3>个人信息表</h3>
  10.     <form action="">
  11.       <fieldset>
  12.         <legend>必填信息</legend>
  13.         <section>
  14.           <label for="name">姓名:</label>
  15.           <input
  16.             type="text"
  17.             required
  18.             placeholder="请输入姓名"
  19.             name="name"
  20.             id="name"
  21.             autofocus
  22.           />
  24.           <label for="sex">性别:</label>
  25.           <input type="radio" name="sex" id="male" value="male" />
  26.           <label for="male">男</label>
  27.           <input type="radio" name="sex" id="female" value="female" />
  28.           <label for="female">女</label>
  29.           <br />
  30.           <label for="idcard">证件类型</label>
  31.           <select name="idcard" id="idcard">
  32.             <option value="sfz">身份证</option>
  33.             <option value="jlz">外国人居留证</option>
  34.             <option value="gatjzz">港澳台居住证</option>
  35.           </select>
  36.           <label for="idnumber">证件号码:</label>
  37.           <input
  38.             type="text"
  39.             name="idnumber"
  40.             id="number"
  41.             required
  42.             placeholder="请输入证件号码"
  43.           />
  44.         </section>
  45.       </fieldset>
  46.       <fieldset>
  47.         <legend>选填信息</legend>
  48.         <label for="introduce">自我介绍:</label>
  49.         <textarea
  50.           style="display: block; resize: none;"
  51.           name="introduce"
  52.           id="introduce"
  53.           cols="54"
  54.           rows="10"
  55.           maxlength="300"
  56.           placeholder="不超过300字"
  57.         ></textarea>
  58.       </fieldset>
  59.       <button>提交</button>
  60.     </form>
  61.   </body>
  62. </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