Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html常用属性，表单控件元素，请求类型，`type`类型
Blogger Information
Blog 15
fans 2
comment 0
visits 35365
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常用属性，表单控件元素，请求类型，`type`类型
w™下載一個妳
Original
1902 people have browsed it

4/3学习内容

1.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>Document</title>
  7.   </head>
  8.   <body>
  9.     <table
  10.       border="1"
  11.       cellpadding="5"
  12.       cellspacing="0"
  13.       width="400"
  14.       height=""
  15.       align="center"
  16.     >
  17.       <!--border:单元格宽度， cellpadding:内容和表格之间间距，cellspacing:单元格单实线，width：宽，  height：高， align="center"：文本居中-->
  18.       >
  19.       <colgroup bgcolor="gray">
  20.         <!--colgroup:列分组，span:跨列   复颜色，没有设置的地方统一为此颜色-->
  21.         <col />
  22.         <col /bgcolor="lightgeen">
  23.         <!--指定列为一种颜色-->
  24.         <col /bgcolor="yellow"span="2">
  25.         <!--2为指定2列同一样颜色-->
  26.         <col />
  27.         <col />
  28.         <col />
  29.       </colgroup>
  30.       <caption style="font-size: 1.5rem; margin-bottom: 10px;">
  31.         <!--style:字体样式，font-size: 1.5rem：此为系统的1.5倍，  margin-bottom: 10px;：此为下间距。-->
  32.         员工信息表
  33.       </caption>
  34.       <thead bgcolor="red">
  35.         <!--bgcolor="red":表头统一背景-->
  36.         <tr>
  37.           <th>部门</th>
  38.           <th>ID</th>
  39.           <th>姓名</th>
  40.           <th>职位</th>
  41.           <th>手机</th>
  42.         </tr>
  43.       </thead>
  45.       <tbody>
  46.         <tr>
  47.           <td rowspan="3">开发部</td>
  48.           <!--rowspan="3"：合并单元格-->
  49.           <td>101</td>
  50.           <td>小王</td>
  51.           <td>主管</td>
  52.           <td>1382522</td>
  53.         </tr>
  54.         <tr>
  55.           <td>102</td>
  56.           <td>小张</td>
  57.           <td>程序员</td>
  58.           <td>1392252</td>
  59.         </tr>
  60.         <tr>
  61.           <td>103</td>
  62.           <td>小李</td>
  63.           <td>实习生</td>
  64.           <td>1542252</td>
  65.         </tr>
  66.       </tbody>
  67.       <tbody>
  68.         <tr>
  69.           <td rowspan="3">销售部</td>
  70.           <td>104</td>
  71.           <td>小马</td>
  72.           <td>主管</td>
  73.           <td>1952252</td>
  74.         </tr>
  75.         <tr>
  76.           <td>103</td>
  77.           <td>小刘</td>
  78.           <td>客服</td>
  79.           <td>1422252</td>
  80.         </tr>
  81.         <tr>
  82.           <td>105</td>
  83.           <td>小朱</td>
  84.           <td>实习生</td>
  85.           <td>1252252</td>
  86.         </tr>
  87.       </tbody>
  88.       <tfoot>
  89.         <tr bgcolor="#ccc">
  90.           <td>备注</td>
  91.           <td colspan="4">所有员离职必须提前30天提交书面申请</td>
  92.           <!--colspan="4":列合并4列-->
  93.         </tr>
  94.       </tfoot>
  95.       <tr></tr>
  96.     </table>
  97.   </body>
  98. </html>

1.1表格实操图：

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 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
  37.       action="handle.php"
  38.       method="post"
  39.       enctype="application/x-www-form-urlencoded"
  40.       id="register"
  41.     >
  42.       <!-- 单行文本输入框 -->
  43.       <section>
  44.         <label for="username">用户名:</label>
  45.         <!-- 必选且自动获取焦点 -->
  46.         <input
  47.           type="text"
  48.           name="username"
  49.           id="username"
  50.           maxlength="20"
  51.           placeholder="不少于6位"
  52.           required
  53.           autofocus
  54.         />
  55.       </section>
  57.       <!-- 密码输入框 -->
  58.       <section>
  59.         <label for="password">密码:</label>
  60.         <input
  61.           type="password"
  62.           name="password"
  63.           id="password"
  64.           size="10"
  65.           placeholder="不少于8位"
  66.           required
  67.         />
  68.       </section>
  70.       <!-- 单选框 -->
  71.       <section>
  72.         <label for="secret">性别:</label>
  73.         <div>
  74.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  75.           <input type="radio" name="gender" id="male" value="male" /><label
  76.             for="male"
  77.             >男</label
  78.           >
  79.           <input type="radio" name="gender" id="female" value="female" /><label
  80.             for="male"
  81.             >女</label
  82.           >
  83.           <!-- checked: 默认选项 -->
  84.           <input
  85.             type="radio"
  86.             name="gender"
  87.             id="secret"
  88.             value="female"
  89.             checked /><label for="secret">保密</label>
  90.         </div>
  91.       </section>
  92.       <section>
  93.         <label for="programme">兴趣</label>
  94.         <div class="box">
  95.           <input type="checkbox" name="hobby"[]  id="game" value="game"checked/>
  96.         </label for="">游戏</label>
  98.         <input type="checkbox" name="hobby"[]   id="trave" value="trave"/>
  99.     </label for="">旅游</label>
  101.          <input type="checkbox" name="hobby"[]  id="shoot"  value="shoot"/>
  102.          <label for="">摄影</label>
  104.          <input type="checkbox" name="hobby"[]  id="programme " value="programme "checked/>
  105.          <label for="">编程</label>
  107. </div>
  108.       </section>
  109.     </form>
  110.   </body>
  111. </html>

2.1表单实操图：

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>Document</title>
  7.   </head>
  8.   <body>
  9.     <p>水果</p>
  10.     <ul>
  11.       <li>梨子</li>
  12.       <li>香蕉</li>
  13.       <li>草莓</li>
  14.     </ul>
  15.     <p>电器</p>
  16.     <ol>
  17.       <li>电吹风</li>
  18.       <li>电风扇</li>
  19.       <li>电磁炉</li>
  20.     </ol>
  21.     <p>蔬菜</p>
  22.     <dl>
  23.       <dt>萝卜</dt>
  24.       <dd>红萝卜</dd>
  25.     </dl>
  26.   </body>
  27. </html>

3.1列表实操图

4.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>Document</title>
  7.   </head>
  8.   <body>
  9.     <img src="/images/20.png">中文网图标(插入图片）</img>
  10.     <br>
  11.     <br>
  12.     <a href="https://www.php.cn/course.html"> 点击跳转php中文视频教程</a>
  13.     <br>
  14.     <br>
  15.     <div>
  16.      <a href="tel:1581252****">联系电话</a>
  17.     </div>
  18.   </body>
  19. </html>

4.1html插入超链接实操图

表单与控件元素

  • 表单分为表单元素与控件元素二部分
  • 表单元素仅一个: <form>
  • 表单控件元素,根据类型不同,有多个

1. 表单元素<form>

1.1 常用属性

序号 属性 描述
1 action 表单提交的 URL 地址(处理表单请求的脚本)
2 method 表单提交类型:GET/POST
3 enctype 设置表单提交数据的编码方式
4 name 表单唯一名称,与 ID 同义
5 target 打开请求 URL 的方式,如果_blank

1.2 请求类型method

  • web 请求方式有二种: 超链接与表单提交
  • 超链接就是使用<a>标签发起请求,其实就是GET请求
  • 表单提交默认就是GET请求,但例用最多的是POST
  • 请求类型属性action的取值
序号 允许值 描述
1 GET 默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2 POST 表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype

序号 允许值 适用场景 描述
1 application/x-www-form-urlencoded 接收value值 默认值,使用 URL 编码,GET/POST 均适合
2 multipart/form-data 文件上传 采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3 text/plain 电子邮件 如action="mailto:URL

1.4 表单名称name

序号 功能 描述
1 标识表单元素 与id一样,用来唯一标识该表单元素
2 绑定表单元素 用于表单控件元素的 form 属性,用来绑定所属表单
3 访问表单元素 快捷访问内部控件元素,如form.input.value

1.5 打开方式target

序号 允许值 描述
1 _self 默认值,当前窗口打开提交的 URL
2 _blank 新窗口打开提交的 URL
3 _parent 父窗口打开提交的 URL
4 _top 顶层窗口打开提交的 URL

2. 表单控件元素<input>

2.1 常用属性

序号 属性 描述
1 type 控件类型,如文本框, 复选框…
2 name 请求参数的名称,对应于脚本处理的变量名
3 value 请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4 form 控件所属表单
5 placeholder 仅限输入框text和password,输入框的提示信息
6 list 仅限输入框text和password,下拉框智能提示
7 autocomplate 仅限输入框text和password,自动完成(历史记录)
8 maxlength 仅限输入框text/password, 允许输入最大字符数量
9 checked 仅限单选框radio, 复选框checkbox(布尔属性)
10 readonly 元素只读,但通过 JavaScript 可修改(布尔属性)
11 disabled 元素禁用,(布尔属性)
12 autofocus 自动获取焦点,一个表单仅限一个控件
13 src 仅限图像域images, 图像 URL 地址
14 width 仅限图像域images, 图像宽度
15 height 仅限图像域images, 图像高度

2.2 type类型

  • 常用类型
序号 类型 描述
1 <input type="text"> 单行文本框 (默认值)
2 <input type="password"> 密码输入框
3 <input type="radio"> 单选框
4 <input type="checkbox"> 复选框
5 <input type="image"> 图像域/提交表单
6 <input type="file"> 文件上传域
7 <input type="hidden"> 隐藏域
  • html5 新增类型
序号 类型 描述
1 <input type="email"> 电子邮件
2 <input type="data"> 日期
2 <input type="data"> 日期
4 <input type="datetime-local"> 本地日期时间
5 <input type="tel"> 电话号码
6 <input type="url"> URL 地址
7 <input type="number"> 数值
8 <input type="range"> 范围拖动条
9 <input type="search"> 搜索框/移动
10 <input type="color"> 拾色器

2.3 常用事件属性

序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发
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