简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html常用属性，表单控件元素，请求类型，`type`类型

html常用属性，表单控件元素，请求类型，`type`类型

w™下載一個妳
w™下載一個妳原创
2020年04月04日 19:26:141896浏览

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 选择内容文本时触发
上一条：链接元素、表单元素、表格元素、表单元素的使用举例下一条：html标签1（语义化标签，超链接，表单，表格，列表）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多