HTML中的表格和表单

最新推荐文章于 2024-08-11 23:38:32 发布

Mars-xq

最新推荐文章于 2024-08-11 23:38:32 发布

阅读量2.5k

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/sinat_31057219/article/details/55826374

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表格：table

caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。若是纯文字，默认会以粗体、水平居中的样式表现。

tr 元素定义表格行table row，tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。

th 元素定义表头table head，在表格中：加粗居中显示。

td 元素定义表格单元table data。td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML名称</title>
    </head>

    <body>
        <table border="1" width="450">
          <caption>Monthly savings</caption>

          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>

          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>
    </body>
</html>

效果图：
Markdown

表单：form
定义和用法
form 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
提示和注释
注释：form 元素是块级元素，其前后会产生折行。

属性
action {URL}：一个URL地址；指定form表单向何处发送数据。
enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。
指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值
method {get/post}：指定表单以何种方式发送到指定的页面。
指定的值有：get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。post ：form表单里所填的值，附加在HTML Headers上。

form的属性：
属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

form 标签用于创建供用户输入的 HTML 表单。
form 元素包含一个或多个如下的表单元素：
input
textarea
button
select
option
optgroup
fieldset
label

colspan表示该一储存格向右打通的栏数。
colspan是表示横向合并单元格，
colspan=“3”表示水平合并三个td

rowspan表示该一储存格向下打通的栏数。
rowspan是表示竖直合并单元格，
rowspan=“2” 表示竖直合并两个td

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML名称</title>
</head>

<body>
<form enctype="multipart/form-data" action="ashx/login.ashx" method="post">
  <table cellspacing="20" border="1" cellpadding="10">
    <tr>
      <td><label for="txtname">账号：</label></td>
      <td><input type="text" id="txtname" name="login_username" /></td>
    </tr>
    <tr>
      <td><label for="txtpswd">密码：</label></td>
      <td><input type="password" id="txtpswd" name="login_pswd" /></td>
    </tr>
    <tr>
      <td colspan=2><input type="reset" /> 
      <input type="submit" /></td>
    </tr>
  </table>
</form>
</body>
</html>

效果图：

Markdown

form的input

HTML 表单用于搜集不同类型的用户输入。
HTML 表单用于收集用户输入。

form元素定义 HTML 表单：
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input 元素是最重要的表单元素。
input 元素有很多形态，根据不同的 type 属性。

<!DOCTYPE html>
<html>

<!--
HTML 表单用于搜集不同类型的用户输入。
HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
-->
<head>
    <meta charset="utf-8">
    <title>My H5</title>
</head>
<>


<!--<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
-->

<!--文本域（Text Fields）-->
<h1>文本域:input type="text"</h1>

<form>
    First name:<br>
    <input type="text" name="firstname">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
</form>
<p>表单本身并不可见。</p>

<p>还要注意文本字段的默认宽度是 20 个字符。</p>

<!--密码字段通过标签<input type="password"> 来定义:-->
<h1>密码字段:input type="password"</h1>

<form>
    Password: <input type="password" name="pwd">
</form>
<!--注意:密码字段字符不会明文显示，而是以星号或圆点替代。-->

<!--单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：-->
<h1>单选按钮:input type="radio"</h1>

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

<!--<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。-->
<h1>复选框:input type="checkbox"</h1>

<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>

<!--提交按钮
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：-->
<h1>提交按钮:input type="submit"</h1>

<form action="action_page.php">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
</form>
<!--假如您在上面的文本框内键入几个字母，然后点击确认按钮，
那么输入数据会传送到 "action_page.php" 的页面。
该页面将显示出输入的结果。-->

<!--value 属性规定输入字段的初始值
-->

<!--readonly 属性
readonly 属性规定输入字段为只读（不能修改）-->
<h1>readonly 属性规定输入字段为只读（不能修改）</h1>

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

<!--disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。-->
<h1>disabled 属性</h1>

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

<!--size 属性
size 属性规定输入字段的尺寸（以字符计）-->
<h1>size 属性</h1>

<form action="">
    First name:<br>
    <input type="text" name="firstname" value="John" size="50">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
</form>

<!--maxlength 属性
maxlength 属性规定输入字段允许的最大长度
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。-->
<h1>maxlength 属性</h1>

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


<!--Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。-->

<!--Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。-->

<!--Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
包含name属性才可以成功提交，即没有name属性不能被提交-->

<!--用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。-->
<h1>fieldset组合表单数据</h1>

<form action="action_page.php">
    <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<!--下拉列表select option-->
<p>列表通常会把首个选项显示为被选选项。您可以通过 selected 属性预选择某些选项。</p>

<form action="action_page.php">
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <br><br>
    <input type="submit">
</form>

<h1>textarea 元素定义多行输入字段（文本域）</h1>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<h1>button 元素定义可点击的按钮</h1>
<button type="button" onclick="alert('Hello World!')">点击我！</button>

<!--<img> 标签有两个必需的属性：src 和 alt。
src规定显示图像的 URL。
alt规定图像的替代文本。-->
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">


</body>
</html>