关于HTML的form表单与table表格

最新推荐文章于 2024-04-26 15:36:17 发布

三月清风谷

最新推荐文章于 2024-04-26 15:36:17 发布

阅读量1.3k

点赞数 26

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/2301_76802665/article/details/129913582

版权

一、什么是HTML

HTML它的全称为 HyperText Mark-up Language

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二、关于其中的form表单

HTML 表单用于搜索不同类

型的用户输入

其中<form>表单也是table子标签

form表单中需要用<input>、<textarea>以及<select>标签完成各种功能的实现。

一、<input>标签


 <form>
       用户名：<input type="text">
    </form>

其中type属性用于设置<input>标签所设置的浏览器控件的类型而type属性设置为text时，将在表单中插入单行文本框控件

效果如图


 <form>
       密码：<input type="password">
    </form>

当type属性设置为password时，将在表单中插入单行密码框控件，密码控件可以使用特定字符来代替用户输入的内容，达到加密的目的

效果如下

以上总的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
       <p>用户名：<input type="text" ></p>
       <p>密码 ：<input type="password"></p>
       <p><input type="button" name="" value="登入" ></p>
    </form>
    
</body>
</html>

效果如下

剩下的属性用法

其他的就不给大家展示了

其他属性就给大家放这啦

 text ：文本输入框 ；

    password :密码输入框；

    email:邮箱输入框；

    date: 日期输入框；

    time: 时间输入框；

    tel: 手机号输入框；

    number :年龄输入框；

    button：普通按钮；

    submit：提交按钮；

    reset：重置；

    image：插入图片 ；

    radio；单选

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

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

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

     value : 当前值；

     maxlength ：最大输入值；

给大家展示一段代码好好感受一下吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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">
     
    
</body>
</html>

效果如下图

二、关于table表格

1.table标签：用来定义表格。表格的所有内容需要写在 <table> 和 </table> 之间。

注意：默认情况下，表格是没有边框的。但是我们可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。

要定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr 子标签，
要在一行中定义单元格，就需要使用到 td 子标签。
2.caption标签：为表格设置标题，标题用来描述表格的内容。

3.tr标签：是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。

4.td标签：是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。

5.th标签：是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

二、合并单元格的属性及用法
1.rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。

2.colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

注意：

（1）跨行和跨列属性是对td和th两个单元格使用的，对tr行标签无效。

（2）rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。

（3）每次合并 n 个单元格都要少写 n-1 个<td>标签（需要删除相应行内单元格，否则就会出现bug）。

三、cellspacing和cellpadding
1.cellspacing属性是各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

2.cellpadding属性是文字与边框的距离。此属性的参数值是数字，表示单元格间隙所占的像素点数。

注意：cellspacing、cellpadding是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>1000</td>
    </tr>
    <tr>
        <td>2</td>
        <td >雷震子</td>
        <td>500</td>
    </tr>
    <tr>
        <td>3</td>
        <td>李元芳</td>
        <td>50</td>
    </tr>
</thead>
</tbody>
</table>

效果如下

好啦分享就到这啦，再见！

三月清风谷

关注

26
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
关于HTML的form表单与table表格

HTML它的全称为 HyperText Mark-up LanguageHTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页。
复制链接

扫一扫