JavaWeb-06-表格、表单、表单项标签

最新推荐文章于 2023-08-30 16:34:28 发布

学不会is dog

最新推荐文章于 2023-08-30 16:34:28 发布

阅读量707

点赞数

分类专栏： JavaWeb 文章标签： html 前端 web

本文链接：https://blog.csdn.net/yelitoudu/article/details/129955225

版权

JavaWeb 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

一、表格标签

标签	描述	属性/备注
`<table>`	定义表格整体，可以包裹多个`<tr>`	border：规定表格边框的宽度 width：规定表格的宽度 cellspacing：规定单元之间的空间
`<tr>`	表格的行，可以包裹多个`<td>`
`<td>`	表格单元格（普通），可以包裹内容	如果是表头单元格，可以替换为`<th>`

实现以下网页：

实现

1、代码及效果

<!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>表格标签</title>
</head>
<body>
    
    <!-- 
        border（看到报红不用管，有效果就行）：规定表格边框的宽度
        cellspacing：规定单元边沿与其内容之间的空白
        width：规定表格的宽度
     -->
    <table border="1px" cellspacing="0" width="600px">
        <!-- 第一行 -->
        <tr>
            <!-- 4列 -->
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>

        <!-- 第二行 -->
        <tr>
            <!-- 4列 -->
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>

        <!-- 第三行 -->
        <tr>
            <!-- 4列 -->
            <td>2</td>
            <td> <img src="img/alibaba.jpg" width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述

二、表单标签

场景：在网页中主要负责数据采集功能，如：注册、登录等数据采集。
标签：<from>
表单项：不同类型的 input 元素、下拉列表、文本域等。
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
- <textarea>：定义文本域
属性：
- action：规定当提交表单时向何处发送表单数据（URL）
- method：规定用于发送表单数据的方式（GET、POST）

1、GET（默认）

get(默认)：在url后面拼接表单数据，比如：?username=dog&age=12，url的长度有限制

在这里插入图片描述

2、POST

post：在消息体（请求体）中传递的，参数大小无限制

在这里插入图片描述

3、代码

<!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>表单标签</title>
</head>
<body>
    
    <!-- 
        action：规定当提交表单时向何处发送表单数据（URL）。（如果不指定url，默认提交到当前页面中）
        method：规定用于发送 form-data 的 HTTP 方法。
            get（默认）：在url后面拼接表单数据，比如：?username=admin&age=23，url长度有限制
            post：在消息体（请求体）中传递的，参数大小无限制
     -->
    <form action="" method="post">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">
        <input type="submit" value="提交">
    </form>

</body>
</html>

小结

表单标签
- 标签：<form>
- 属性：
  - action：表单数据提交的url地址
  - method：表单提交方式
    - get：表单数据拼接在url后面（?username=admin&age=23），大小有限制
    - post：表单数据在请求体（消息体）中携带，大小没有限制
注意
- 表单项必须有name属性才可以提交。

三、表单项标签

type取值	描述	形式
text	定义单行的输入字段（默认值）

password	定义密码输入字段

radio	定义单选按钮

checkbox	定义复选框

file	定义文件上传按钮

data / time / datetime-local	定义日期 / 时间 / 日期时间

number	定义数字输入框

email	定义邮件输入框

hidden	定义隐藏域（网页中看不见的）
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

代码

<!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>表单项标签</title>
</head>

<body>
    <!-- 以post方式提交表单数据 -->
    <form action="" method="post">
        用户名：<input type="text" name="username"> <br><br>
        密码：<input type="password" name="password"> <br><br>
        真实姓名：<input type="text" name="name"> <br><br>
        年龄：<input type="number" name="age"> <br><br>
        性别：<label><input type="radio" name="gender" value="1">男</label>
              <label><input type="radio" name="gender" value="2">女</label> <br><br>
        爱好：<label><input type="checkbox"> Java</label>
              <label><input type="checkbox"> 王者荣耀</label>
              <label><input type="checkbox"> 运动</label> <br><br>
        生日：<input type="date" name="birthday"> <br><br>
        时间：<input type="time" name="time"> <br><br>
        日期时间：<input type="datetime-local" name="datetime"> <br><br>
        邮箱：<input type="email" name="email"> <br><br>
        学历：<select name="degree">
                    <option value="">--------请选择--------</option>
                    <option value="1">大专</option>
                    <option value="2">本科</option>
                    <option value="3">硕士</option>
                    <option value="4">博士</option>
              </select> <br><br>
        描述：<textarea name="describe" cols="30" rows="10"></textarea> <br><br>
        <!-- 隐藏输入框：网页看不到的 -->
        <input type="hidden" name="id" value="1">

        <!-- 表单常见按钮 -->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>

</body>

</html>

在这里插入图片描述

学不会is dog

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
JavaWeb-06-表格、表单、表单项标签

场景：在网页中主要负责数据采集功能，如：注册、登录等数据采集。场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。post：在消息体（请求体）中传递的，参数大小无限制。元素、下拉列表、文本域等。
复制链接

扫一扫