初始HTML----表单表格

最新推荐文章于 2023-07-14 19:00:42 发布

泸州月

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量351

点赞数 1

分类专栏： html 文章标签： html 表单表格

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_17119267/article/details/104996845

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初始HTML----表格表单

HTML 表格

表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

在浏览器显示如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpDoxB89-1584703288788)(G:\PythonVIP\web前端-小泼老师\文档\截图20200320174307.png)]$

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头

表格的表头使用 < th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CwWWRzcn-1584703288790)(G:\PythonVIP\web前端-小泼老师\文档\截图20200320174748.png)]$

HTML 表格标签

标签	描述
< table>	定义表格
< th>	定义表格的表头
< tr>	定义表格的行
< td>	定义表格单元
< caption>	定义表格标题
< colgroup>	定义表格列的组
< col>	定义用于表格列的属性
< thead>	定义表格的页眉
< tbody>	定义表格的主体
< tfoot>	定义表格的页脚
colspan	合并列
rowspan	合并行

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        td{
            border: 1px solid green;
            text-align: center;
            width: 200px;
        }
    </style>
</head>
<body>
<!--<table>-->
    <!--<tr>-->
        <!--<td>周一</td>-->
        <!--<td>周二</td>-->
        <!--<td>周三</td>-->
        <!--<td>周四</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>苹果</td>-->
        <!--<td>香蕉</td>-->
        <!--<td>橘子</td>-->
        <!--<td>菠萝</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>羊肉</td>-->
        <!--<td>牛肉</td>-->
        <!--<td>猪肉</td>-->
        <!--<td>锅包肉</td>-->
    <!--</tr>-->
<!--</table>-->
<table>
    <tr>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="3">大白菜</td>
        <td >小白菜</td>
        <td>菠菜</td>
        <td>包菜</td>
    </tr>
    <tr>
        <td>牛肉</td>
        <td>香菜</td>
        <td>西红柿鸡蛋</td>
        <td>青椒炒蛋</td>
    </tr>
    <tr>
        <td>老干妈</td>
        <td>鱼香肉丝</td>
        <td>奶茶</td>
        <td>牛肉泡馍</td>
    </tr>
</table>
</body>
</html>

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 < form> 来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（< input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

密码字段通过标签< input type=“password”> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

< input type=“radio”> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框（Checkboxes）

< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮(Submit Button)

< input type=“submit”> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

重置按钮

< input type=“reset”>定义重置按钮点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
<input type="reset" name="button" id="button" value="重置">
</form>

表单按钮属性

表单中的单选按钮可以设置以下几个属性：value、name、checked

value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked=“checked” 时，该选项被默认选中

HTML 表单标签

标签	描述
< form>	定义供用户输入的表单
< input>	定义输入域
< textarea>	定义文本域 (一个多行的输入控件)
< label>	定义了元素的标签，一般为输入标题
< fieldset>	定义了一组相关的表单元素，并使用外框包含起来
< legend>	定义了元素的标题
< select>	定义了下拉选项列表
< optgroup>	定义选项组
< option>	定义下拉列表中的选项
< button>	定义一个点击按钮
< datalist>	指定一个预先定义的输入控件选项列表
< keygen>	定义了表单的密钥对生成器字段
< output>	定义一个计算结果

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
搜索 <input type="text" placeholder="请输入您要查询的关键词" name="wd">
    <input type="submit" value="搜索">
    <input type="radio" checked="checked">男
</form>
<!--文 本 框:<input type="text" value="" maxlength"可输入的最大长度" size="" />-->
<!--提交按钮:<input type="submit" value="提交" />-->
<!--普通按钮:<input type="button" value="普通按钮" />-->
<!--密 码 框:<input type="password" />-->
<!--重置按钮:<input type="reset" value="重置" />-->
<!--单选按钮:<input type="radio" />name必须设置成一样的,表示是一组单选按钮 checked="checked"默认选中-->
<!--文件上传域:<input type="file"/>-->
<!--多选按钮:<input type="checkbox" />name可以设置成不一样的,要求设置成一样的-->
<!--下 拉 框:<select><option></option></select>-->
<!--多行文本域:<textarea  rows="行" cols="列"></textarea>-->
<!--隐 藏 域:<input type="hidden" />-->
<!--图片按钮:<input type="image" src= "" onmouseover/>-->
</body>
</html>

作业： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAOJuyYx-1584703288792)(G:\PythonVIP\web前端-小泼老师\文档\图片1.png)]$

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
        <form action=" "method="post"enctype="multipart/form-data">
          <p><label for="user">用户名:</label><input type="text"name="user"placeholder="请输入用户名"id="user"></p>
            <p><label for="pws">密&emsp;码:</label><input type="password"name="password"placeholder="请输入密码"id="psw"></p>
            <p>男&emsp;女:
            男<input type="radio"name="gender">
            女<input type="radio"name="gender">
            保密<input type="radio"name="gender">
            </p>
            <p>爱&emsp;好:
            唱歌<input type="checkbox"name="hobby">
            跳舞<input type="checkbox"name="hobby">
            画画<input type="radio"name="hobby">
            </p>
            <p>上传头像：<input type="file"></p>
            <p>地&emsp;址：
                <select>
                    <optgroup label="湖南省">
                        <option>益阳市</option>
                        <option>长沙市</option>
                         <option>岳阳市</option>
                    </optgroup>
                    <optgroup label="陕西省">
                        <option>西安市</option>
                        <option selected="selected">咸阳市</option>
                         <option>杨凌市</option>
                    </optgroup>
                </select>
            </p>
            <p>个人简介：<textarea rows="10"cols="30"></textarea></p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </body>
</html>

泸州月

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
初始HTML----表单表格

初始HTML----表格表单HTML 表格表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格实例<!DOCTYPE ht...
复制链接

扫一扫