HTML表格和HTML表单

标签: 前端  html

HTML 表格

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

在这里插入图片描述

(1)表单标记
<table>...</table>标记表示表格

width属性用来设置表格的宽度
border属性用来设置表格的边框
align属性用来设置表格的对齐方式
bgcolor属性用来设置表格的背景

(2)标题标记

标题标记以<caption>开头,以</caption>结束,标题标记也有一些属性,比如 align,valign

(3)表头标记

<th>开始,以</th>结束

(4)表格行标记

表格行标记以<tr>开头,</tr>结束,一组<tr>标记表示表格中的一行。<tr>标签要嵌套在<table>标签中使用

(5)列标记

<td> 开始,</td>结束。一个<tr>标记可以嵌套若干个<td>标记。该标记也具有align,background,valign等属性

举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>标题标记</title>
</head>

<body>
<table width="318" height="167" border="1" align="center">
  <caption>学生考试成绩单</caption>
  <tr>
<td width="center" valign="middle"> 姓名</td>
<td width="center" valign="middle">语文</td>
<td width="center" valign="middle">数学</td>
<td width="center" valign="middle">英语</td>
</tr>
</body>

</html>

在这里插入图片描述

HTML表单

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

<!--表单使用表单标签 <form> 来设置: -->
<form>
.
input 元素
.
</form>

(1)action属性
该属性用来指定处理表单数据程序的URL地址。

(2)method 属性
该属性用来指定数据传送到服务器的方式。它有两种属性值,分别是get与post。get属性值表示将输入的数据追加在action指定的地址后面,并传送到服务器。当属性值为post时,会将输入的数据

(3)name属性
该属性指定表单的名称,其值程序员可以自定义。

(4)OnSubmit属性
该属性用于指定当用户单击提交按钮时触发事件。

(5)target属性
该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为_blank,_self, _parent,_top。

(1)_blank表示在新窗口中打开目标文件
(2)_self表示同一个窗口中打开(该项一般不用设置)
(3)_parent表示在上一级窗口打开,一般使用框架页时经常使用。
(4)_top 表示在浏览器的整个窗口中打开,忽略任何框架。

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签,< input>。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)
文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

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

浏览器显示如下:
在这里插入图片描述
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
注意:
Type属性是< input>标记中非常重要的内容,决定了输入数据的类型。
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客</title>
</head>
<body>
<form action="" method="post" name="myform">
  用户名:<input name="username" type="text" id="UesrName4" maxlength="20"><br>
  密码:<input name="pwd1"  type="password" id="PWD14" size="20" maxlength="20"><br>
  确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>
  性别:<input name="sex" type="radio"class="noborder"value="男" checked>男&nbsp;
  <input name="sex" type="radio" class="noborder" value=""><br>
  爱好:
  <input name="like" type="checkbox" id="like" value="体育">
  体育
  <input name="like" type="checkbox" id="like" value="旅游">
  旅游
  <input name="like" type="checkbox" id="like" value="听音乐">
  听音乐
  <input name="like" type="checkbox" id="like" value="看书">
  看书<br>

E-mail:<input name="email" type="text" id="PWD224" size="50"><br>
  <input name="Submit" type="submit" class="btn_grey" value="确定保存">
  <input name="Reset" type="reset" class="btn_grey" value="重新填写">
  </form>
</body>
</html>

<select>...</select>下拉列表框标记
使用<option>标记向列表中添加内容。<select>标记的语法格式如下:

<select name="name" size="digit" multiple="multiple" disabled="disabled"></select>
name          用于指定列表框的名称
size          用于指定列表框中显示的选项数量,超出该数量的选项可以通过拖动滚动条查看
disabled      用于指定当前列表框不可使用(变成灰色)
multiple      用于让多行列表框支持多选

多行文本标记
标签定义多行的文本输入控件
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体。通常情况下,标记出在标记的标记内容中。

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly"  wrap="value">默认值
</textarea>

Wrap属性可选值
Hard 默认值,表示自动换行
Soft 自动换行
Off 不自动换行

举例:

<body>
<form name="form1" method="post" action="">

<textarea name="content" cols="30" rows="5"   wrap="hard">默认值
</textarea>
</body>

在这里插入图片描述

版权声明:本文为qq_43573663原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43573663/article/details/108880932