HTML学习小结（2）

Tsuki mly

已于 2024-01-24 21:57:47 修改

阅读量1.6k

点赞数 31

文章标签： html 学习前端

于 2024-01-24 21:48:05 首次发布

本文链接：https://blog.csdn.net/2301_80842161/article/details/135827460

版权

前言：

本篇文章接上一篇文章，继续记录总结学习html时的笔记和学习html的体会

在文章的最后写了一段提交简历的界面用来练习使用HTML常用标签

一、HTML常用标签（下）

1.表单标签

表单是为了收集用户信息。在网页中，和用户交互，收集用户资料时就需要表单。HTML表单通过标签<form>来定义。多数情况下被用到的表单标签是输入标签（<input>）。其中type属性为text的表示字母、数字、汉字等内容；属性为password表示为密码，字符以星号或圆点替代。属性为radio定义了单选框。属性为checkbox表示一个复选框。属性为submit定义为提交按钮。

1.1 表单的组成

在HTML中，表单由表单域，表单控件（表单元素），提示信息三个部分构成。

1.2 表单域

在HTML中，<form>标签用来定义表单域，主要实现用户信息的收集和传递。（form标签会将手机到的表单元素信息提交给服务器）

1.2.1 表单域中的常用属性

1.action

其作用是用于指定接收并处理表单数据的服务器程序的url地址。

2.method

其作用是设置表单数据的提交方式，其取值为get or post

3.name

其作用为指定表单的名称，以区分同一个页面中的多个表单域

<form action="url地址" method="提交方式" name="表单域名称">
    .......
</form>

1.3 表单控件

表单控件又称表单元素。表单元素就是可以允许用户在表单中输入或者选择的内容控件。

1.3.1 表单元素：

表单元素标签用于收集用户信息，其中包含一个type属性，根据不同的type属性，输入字段拥有很多形式。eg:单选按钮，多选按钮，文本字段等。

多数情况下被用到的表单标签是输入标签（<input>）。利用 input标签，通过修改type属性值来指定不同控件类型。其中type属性为text的表示字母、数字、汉字等内容；属性为password表示为密码，字符以星号或圆点替代。属性为radio定义了单选框。属性为checkbox表示一个复选框。属性为submit定义为提交按钮。

<input type="属性值" />

注意 1.input输入标签为单标签

type属性值
属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮
reset	定义重置按钮，清除表单中所有数据
submit	定义提交按钮，将表单数据发送给服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

1.3.2 其他属性

1、name，用来定义input元素的名称

name表单元素的名字，要求单选和复选按钮要有相同的name值

2、value，用来规定input元素的值

3、checked，用来规定此元素已被选中，无需再选。用于单选按钮和复选按钮。

4、maxlength，用来规定输入字段中字符最大长度

2. label标签

label标签为input元素定义标签。标签用于绑定一个表单元素，当点击label标签内的文本时，会自动选中相应的表单元素上，增加用户体验。

3.select 表单元素标签

<select>标签控件定义下拉列表，提供多个选项，节约页面空间。

<select>
  <option> choice1</option>
  <option> choice1</option>
  <option> choice1</option>
  ...
</select>

注意 1.select中至少包含一对option

2.若在option中定义 select = "selected"时，当前项即默认选中

4. textarea表单元素标

textarea标签适用于定义多行文本输入的控件，多用于写评论，留言框

<textarea rows="每行中字符数" cols="显示的行数">
    balabala....
</textarea>

以下是一段练习代码，其中涵盖了多个常用标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-注册页面</title>
</head>
<body>
   <h4>欢迎加入大大大公司/h4>
   <table width="500">
       <tr>
           <td>性别</td>
           <td>
<!-- 单选按钮选择性别 -->
               <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg"> 男</label>
               <input type="radio" name="sex" id="nv"> <label for="nv"> <img src="images/women.jpg"> 女 </label>
           </td>
       </tr>

       <tr>
           <td>生日</td>
           <td>
               <select>
                    <option>-请选择年份-</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
               </select>
               <select>
                    <option>-请选择月份-</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
               </select>
               <select>
                    <option>-请选择日-</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                   
               </select>
           </td>
       </tr>

       <tr>
            <td>所在地区</td>
            <td><input type="text" value="美美大陕西"></td>
       </tr>

       <tr>
          <td>婚姻状况</td>
          <td>
                 <input type="radio" name="jiehun" checked="checked"> 未婚 <input type="radio" name="jiehun">已婚 <input type="radio" name="jiehun">离婚
          </td>
       </tr>

       <tr>
         <td>学历</td>
         <td><input type="text" value="学前教育"</td>
       </tr>
       <tr>
         <td>愿意尝试的岗位：</td>
         <td>
              <input type="checkbox" name="zhiyuan" > 会计
              <input type="checkbox" name="zhiyuan" > 销售
              <input type="checkbox" name="zhiyuan" > 程序员
              <input type="checkbox" name="zhiyuan" > 人事
         </td>
       </tr>

       <tr>
        <td>自我介绍</td>
        <td>
             <textarea></textarea>
        </td>
       </tr>
       <tr>
        <td>自述自身优势</td>
        <td>
             <textarea></textarea>
        </td>
       </tr>
       <tr>
        <td>曾经工作经历</td>
        <td>
             <textarea></textarea>
        </td>
       </tr>
       <tr>
         <td></td>
         <td>
            <input type="submit" value="确认提交">
         </td>
       </tr>
       
       <tr>
          <td></td>
          <td>
             <input type="checkbox" checked="checked"> 我已查看并同意提交注意事项
          </td>
       </tr>
       
   </table>
</body>
</html>