HTML部分总结（form表单和table表格）

畅灵玉

已于 2023-03-30 13:01:07 修改

阅读量470

点赞数

文章标签： html 前端

于 2023-03-30 12:45:43 首次发布

本文链接：https://blog.csdn.net/2301_77260619/article/details/129851087

版权

一，HTML介绍

HTML它的全称为 HyperText Mark-up Language

它是一种浏览解析的语言，是由一些标签组成的超文本标记语言。大家日常种可以看到的无论是文本内容，图片，视频，还是持链接等，它都支持。

（有趣的小知识：当浏览器在解析html这个页面时，会把它解析成一颗倒着的树。）

HTML有很多标签，常用的有如<p标签，<br标签，<hr标签，<pre标签，<div标签，<span标签，<img标签等标签以及链接标签，多媒体标签，列表标签，表格标签，标题标签等.

Form标签

今天我们要介绍的是form表单也就是form标签和表格标签里面的table子标签。
在这里插入图片描述

form标签

是用于指定表单数据的提交方式和地址。
       大家都知道在代码中都是英文，所以大部分标签的作用都和英文的意思一致。

在form标签中常见的比如
name：指定表单的名称，方便后续提交使用
id ：表单的唯一名称，一般用于提交或样式设置
action：定义表单数据的提交地址
method：指定表单数据的提交方式，有以下几个常用值

      *get*：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小

      *post*：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制

      *put*：用于修改数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以不用考虑

      *delete*：用于删除数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以不用考虑

enctype：指定表单提交的数据类型，有以下两个值：

          multipart/form-data：以二进制流的方式进行提交，一般用于文件上传

          application/x-www-form-urlencoded：以文本的方式进行提交，常用方式，

下面是部分常见的功能演示
个人觉得name标签真的很厉害
他在不同的地方都能发挥作用

在这里插入图片描述
name：
代码：

<select name="pravince">
    <option value="重庆">重庆</option>
    <option value="北京">北京</option>
    <option value="天津">天津</option>
    <option value="上海">上海</option>
</select>
</p>
<input type="file"  name="f">

在这里插入图片描述
运行效果如下：

HTML 表单包含表单元素
input元素
代码：

 <form name="1" id="form1"  align="center" action="http://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
   <p><input type="text"      name="username" value="" placeholder="请输入用户名"  size="20" maxlength="5"></p>
   <p><input type="password"  name="password" placeholder="请输入密码"></p>
   <p><input type="email"     name="email"    placeholder="请输入邮箱地址"></p>
   <p><input type="date"      name="date"     placeholder="请输入日期"></p>
   <p><input type="time"      name="time"     placeholder="请输入时间"></p>
   <p><input type="tel"       name="phone"    placeholder="请输入手机号">  </p>
   <p><input type="number"    name="age"      placeholder="请输入年龄">   </p>
   <p><input type="button"    name="btn"    value="普通按钮">  </p>
   <p><input type="submit"    name="submit" value="提交"> </p>
   <p><input type="reset"     name="reset"  value="取消"></p>
   <p><input type="image"  src="images/mybatis-logo.png"  width="100"></p>
  <hr>
   <input type="radio"  name="gender"  value="男">男 <input type="radio" name="gender" value="女">女
   <p><input type="checkbox"  name="hobby" value="看书">看书 
    <input type="checkbox"  name="hobby" value="游戏">游戏 
    <input type="checkbox"  name="hobby" value="电影">电影 
    <input type="checkbox"  name="hobby" value="编码">编码
    <p>
        <textarea name="intro"  rows="10"  cols="40"></textarea>
    </p>
    <p>
      <select name="pravince">
        <option value="重庆">重庆</option>
        <option value="北京">北京</option>
        <option value="天津">天津</option>
        <option value="上海">上海</option>
    </select>
    </p>
    <input type="file"  name="f">
</p>
</form> 
</body>
</html>

<select name="pravince">
    <option value="重庆">重庆</option>
    <option value="北京">北京</option>
    <option value="天津">天津</option>
    <option value="上海">上海</option>
</select>
</p>
<input type="file"  name="f">

在这里插入图片描述

其中

    text ：文本输入框 ；

    password :密码输入框；

    email:邮箱输入框；

    date: 日期输入框；

    time: 时间输入框；

    tel: 手机号输入框；

    number :年龄输入框；

    button：普通按钮；

    submit：提交按钮；

    reset：重置；

    image：插入图片 ；

    radio；单选

    注：这里要把name写上去，否则就不是单选框了；

    checkbox：多选框; 
    checked 默认选中；

     file：可以选择一个或多个元素以提交表单的方式传到服务器上；

     value : 当前值；

     maxlength ：最大输入值；

————————————————

运行效果如下：
在这里插入图片描述

Table标签

表格标签用于数据展示的，它涉及到 table、tr、td、th等子标签。
要定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr 子标签，
要在一行中定义单元格，就需要使用到 td 子标签。

Table标签有以下几种属性：

在这里插入图片描述
table还在以下几个子标签：

代码：

   
    <title>表格标签的使用</title>
</head>
<body>
<table  width="500"    border="1">
  <caption>表格标题</caption>
  <thead>

    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
</thead>
</tbody>
    <tr>
        <td>1</td>
        <td width="50">秦世波</td>
        <td>大哥</td>
    </tr>
    <tr>
        <td>2</td>
        <td >焉俊吉</td>
        <td>二弟</td>
    </tr>
    <tr>
        <td>3</td>
        <td>郭峰</td>
        <td>三弟</td>
    </tr>
</thead>
</tbody>
</table>

运行效果如下：
在这里插入图片描述
小技巧：当需要用到多个元素时，我们可以采用如下方法：

操作时有上图右半部分的提示
运行效果如下所示：

好啦！这期到这里就结束啦！以上就是我对table表格和form表单的一个大概总结；
咱们下期再见！

畅灵玉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML部分总结（form表单和table表格）

一，HTML介绍一，HTML介绍HTML它的全称为 HyperText Mark-up Language它是一种浏览解析的语言，是由一些标签组成的超文本标记语言。大家日常种可以看到的无论是文本内容，图片，视频，还是持链接等，它都支持。（有趣的小知识：当浏览器在解析html这个页面时，会把它解析成一颗倒着的树。HTML有很多标签，常用的有如
复制链接

扫一扫