HTML5 form detailed tutorial

html5 html form detailed tutorial


HTML5 form

 

List of articles

  • HTML5 form
    • 5.1 Define the form
      • 5.1.1 Normal form 、 Column headings
      • 5.1.2 Table title
      • 5.1.3 Table row grouping 、 Table column grouping
    • 5.2 Table properties
      • 5.2.1 One line tables 、 Separate cells
      • 5.2.2 Thin border
    • 5.3 Cell properties
      • 5.3.1 Show across cells 、 Header cell
      • 5.3.2 Binding header 、 Information abbreviation
      • 5.3.3 Cell classification
    • 5.4 Project practice
      • 5.4.2 Design product information list

 

5.1 Define the form

5.1.1 Normal form 、 Column headings

Normal form
One < table > Elements , And one or more tr and td form ,tr Define row ,td Define cells in a row .

<table>
<tr>
<td> At moonset cry the crows, streaking the frosty sky ,</td>
<td> Jiangfeng fishing fire to worry sleep .</td>
</tr>
<tr>
<td> Hanshan Temple outside Suzhou ,</td>
<td> Midnight to the passenger ship .</td>
</tr>
</table>

Column headings
In the data table , Each column should contain a heading . In the database, this title is called a field , stay HTML Is called the header cell . Use th The element defines the header cell .
By default ,th The inner text appears centered 、 Bold shows , and td The inner text is left aligned plain text .

<!doctype html>
<table>
<tr>
<th> user name </th>
<th> email </th>
</tr>
<tr>
<td> Zhang San </td>
<td>[email protected]</td>
</tr>
</table>
<table>
<tr>
<th>&nbsp;</th>
<th> Monday </th>
<th> Tuesday </th>
<th> Wednesday </th>
<th> Thursday </th>
<th> Friday </th>
</tr>
<tr>
<th> The first 1 section </th>
<td> Chinese language and literature </td>
<td> Physics </td>
<td> mathematics </td>
<td> Chinese language and literature </td>
<td> The fine arts </td>
</tr>
<tr>
<th> The first 2 section </th>
<td> mathematics </td>
<td> Chinese language and literature </td>
<td> sports </td>
<td> English </td>
<td> music </td>
</tr>
<tr>
<th> The first 3 section </th>
<td> Chinese language and literature </td>
<td> sports </td>
<td> mathematics </td>
<td> English </td>
<td> Geography </td>
</tr>
<tr>
<th> The first 4 section </th>
<td> Geography </td>
<td> chemical </td>
<td> Chinese language and literature </td>
<td> Chinese language and literature </td>
<td> The fine arts </td>
</tr>
</table>

5.1.2 Table title

< caption > Label definition table title .< caption > The label must follow < table > After tag .
 Insert picture description here

<table>
<caption> Mail list </caption>
<tr>
<th> user name </th>
<th> email </th>
</tr>
<tr>
<td> Zhang San </td>
<td>[email protected]</td>
</tr>
</table>

5.1.3 Table row grouping 、 Table column grouping

Table row grouping
< thead > Definition form The header .
< tbody > Define a table body ( Text ). Use < tbody > label , You can divide the table into a separate section .< tbody > Labels can group one or more rows in a table . It's better to suggest that there is no < tbody > label . stay < tbody > In the label , Only < tr > Labels can define table rows . And once defined , One < tbody > The label is a separate part of the table . For example, you can't start from a < tbody > Across to another < tbody > in .

< tfoot > Define the footer of the table ( footnote ).

thead、tfoot as well as tbody Element gives you the ability to group rows in a table . When you create a form , You may want to have a title line , Some rows with data , And a total line at the bottom . This partition enables the browser to support table body scrolling independent of the table title and footers . When long forms are printed , The header and footers of the form can be printed on each page that contains the form data .

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Table structure </title>
<style type="text/css">
table { width: 100%; }
caption { font-size: 24px; margin: 12px; color: blue; }
th, td { border: solid 1px blue; padding: 8px; }
tfoot td { text-align: right; color: red; }
</style>
</head>
<body>
<table>
<caption>
Structured table tags
</caption>
<thead>
<tr>
<th> label </th>
<th> explain </th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">* In the table , The above label is optional .</td>
</tr>
</tfoot>
<tbody>
<tr>
<!-- &lt finger < &gt finger >-->
<td>&lt;thead&gt;</td>
<td> Define the header structure .</td>
</tr>
<tr>
<td>&lt;tbody&gt;</td>
<td> Define the table body structure .</td>
</tr>
<tr>
<td>&lt;tfoot&gt;</td>
<td> Defines the header structure of a table .</td>
</tr>
</tbody>
</table>
</body>
</html>

Table column grouping
< col > Labels define attribute values for one or more columns in a table . Only in form Or column group .
notes :col The element is empty . To create a column , Must be in tr The element specifies td Elements .
Tips : If you need to specify property values for one or more columns , Please use this element .
Tips : If you need to specify the same attribute value to a column group , Please use < colgroup > Elements .
 Insert picture description here

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="100%" border="1">
<col align="left" />
<col align="center" />
<col align="right" />
<tr>
<td> The thread in the hands of a fond-hearted mother ,</td>
<td> Makes clothes for the body of her wayward boy .</td>
<td> Carefully she sews and thoroughly she mends ,</td>
</tr>
<tr>
<td> Dreading the delays that will keep him late from home .</td>
<td> But how much love has the inch-long grass ,</td>
<td> Reported in the apartments .</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.col1 { width:25%; color:red; font-size:16px; }
.col2 { width:50%; color:blue; }
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup span="2" class="col1"></colgroup>
<colgroup class="col2"></colgroup>
<tr>
<td> The thread in the hands of a fond-hearted mother ,</td>
<td> Makes clothes for the body of her wayward boy .</td>
<td> Carefully she sews and thoroughly she mends ,</td>
</tr>
<tr>
<td> Dreading the delays that will keep him late from home .</td>
<td> But how much love has the inch-long grass ,</td>
<td> Reported in the apartments .</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.col1 { width:25%; color:red; font-size:16px; }
.col2 { width:50%; color:blue; }
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup>
<col span="2" class="col1" />
<col class="col2" />
</colgroup>
<tr>
<td> The thread in the hands of a fond-hearted mother ,</td>
<td> Makes clothes for the body of her wayward boy .</td>
<td> Carefully she sews and thoroughly she mends ,</td>
</tr>
<tr>
<td> Dreading the delays that will keep him late from home .</td>
<td> But how much love has the inch-long grass ,</td>
<td> Reported in the apartments .</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">table { /* Table default style */
border:solid 1px #99CCFF;
border-collapse:collapse;}
.bg_th { /* Title row class style */
background:#0000FF;
color:#fff;}
.bg_even1 { /* Column 1 Class style */
background:#CCCCFF;}
.bg_even2 { /* Column 2 Class style */
background:#FFFFCC;}
</style>
</head>
<body>
<table>
<caption>IE Browser development memorabilia </caption>
<colgroup>
<col class="bg_even1" id="verson" />
<col class="bg_even2" id="postTime" />
<col class="bg_even1" id="OS" />
</colgroup>
<tr class="bg_th">
<th> edition </th>
<th> Release time </th>
<th> Binding system </th>
</tr>
<tr>
<td>Internet Explorer 1</td>
<td>1995 year 8 month </td>
<td>Windows 95 Plus! Pack</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 2</td>
<td>1995 year 11 month </td>
<td>Windows and Mac</td>
</tr>
<tr>
<td>Internet Explorer 3</td>
<td>1996 year 8 month </td>
<td>Windows 95 OSR2</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 4</td>
<td>1997 year 9 month </td>
<td>Windows 98</td>
</tr>
<tr>
<td>Internet Explorer 5</td>
<td>1999 year 5 month </td>
<td>Windows 98 Second Edition</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 5.5</td>
<td>2000 year 9 month </td>
<td>Windows Millennium Edition</td>
</tr>
<tr>
<td>Internet Explorer 6</td>
<td>2001 year 10 month </td>
<td>Windows XP</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 7</td>
<td>2006 In the second half of </td>
<td>Windows Vista</td>
</tr>
<tr>
<td>Internet Explorer 8</td>
<td>2009 year 3 month </td>
<td>Windows 7</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 9</td>
<td>2011 year 3 month </td>
<td>Windows 7</td>
</tr>
<tr>
<td>Internet Explorer 10</td>
<td>2013 year 2 month </td>
<td>Windows 8</td>
</tr>
</table>
</body>
</html>

5.2 Table properties

5.2.1 One line tables 、 Separate cells

One line tables
rules Property specifies which part of the inner border is visible . From a practical point of view , It's better not to prescribe rules, But use CSS To add a border style .
< frame > Tag definition frameset In a particular window ( frame ).
frameset Each frame in can set different properties , such as border、scrolling、noresize wait .

<body>
<table border="1" frame="hsides" rules="rows" width="100%">
<caption>
frame Property value description
</caption>
<tr>
<th> value </th>
<th> explain </th>
</tr>
<tr>
<td>void</td>
<td> Don't show outside borders .</td>
</tr>
<tr>
<td>above</td>
<td> Show the upper outer border .</td>
</tr>
<tr>
<td>below</td>
<td> Show the lower outer border .</td>
</tr>
<tr>
<td>hsides</td>
<td> Show the upper and lower outer borders .</td>
</tr>
<tr>
<td>vsides</td>
<td> Show the left and right outer borders .</td>
</tr>
<tr>
<td>lhs</td>
<td> Show the outside border on the left .</td>
</tr>
<tr>
<td>rhs</td>
<td> Show the outside border on the right .</td>
</tr>
<tr>
<td>box</td>
<td> Show the outside border on all four sides .</td>
</tr>
<tr>
<td>border</td>
<td> Show the outside border on all four sides .</td>
</tr>
</table>

 Insert picture description here
Separate cells
cellpadding and cellspacing The main difference between them is cellpadding Used to fix the width between the edge of a cell and its content , That is, create a blank in the cell between the text and the cell border . and ,cellspacing Can be used to manage the space between individual cells in a table .

<body>
<table border="1" frame="void" cellpadding="6" cellspacing="16">
<caption>
rules Property value description
</caption>
<tr>
<th> value </th>
<th> explain </th>
</tr>
<tr>
<td>none</td>
<td> No lines .</td>
</tr>
<tr>
<td>groups</td>
<td> Lines between row and column groups .</td>
</tr>
<tr>
<td>rows</td>
<td> Lines between lines .</td>
</tr>
<tr>
<td>cols</td>
<td> Lines between columns .</td>
</tr>
<tr>
<td>all</td>
<td> Lines between rows and columns .</td>
</tr>
</table>
</body>
</html>

 Insert picture description here

5.2.2 Thin border

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" rules="all" width="100%">
<caption>
rules Property value description
</caption>
<tr>
<th> value </th>
<th> explain </th>
</tr>
<tr>
<td>none</td>
<td> No lines .</td>
</tr>
<tr>
<td>groups</td>
<td> Lines between row and column groups .</td>
</tr>
<tr>
<td>rows</td>
<td> Lines between lines .</td>
</tr>
<tr>
<td>cols</td>
<td> Lines between columns .</td>
</tr>
<tr>
<td>all</td>
<td> Lines between rows and columns .</td>
</tr>
</table>
</body>
</html>

 Insert picture description here

5.3 Cell properties

5.3.1 Show across cells 、 Header cell

Show across cells


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border=1 width="100%">
<tr>
<th align=center colspan=5> The curriculum </th>
</tr>
<tr>
<th> Monday </th>
<th> Tuesday </th>
<th> Wednesday </th>
<th> Thursday </th>
<th> Friday </th>
</tr>
<tr>
<td align=center colspan=5> In the morning </td>
</tr>
<tr>
<td> Chinese language and literature </td>
<td> Physics </td>
<td> mathematics </td>
<td> Chinese language and literature </td>
<td> The fine arts </td>
</tr>
<tr>
<td> mathematics </td>
<td> Chinese language and literature </td>
<td> sports </td>
<td> English </td>
<td> music </td>
</tr>
<tr>
<td> Chinese language and literature </td>
<td> sports </td>
<td> mathematics </td>
<td> English </td>
<td> Geography </td>
</tr>
<tr>
<td> Geography </td>
<td> chemical </td>
<td> Chinese language and literature </td>
<td> Chinese language and literature </td>
<td> The fine arts </td>
</tr>
<tr>
<td align=center colspan=5> Afternoon </td>
</tr>
<tr>
<td> composition </td>
<td> Chinese language and literature </td>
<td> mathematics </td>
<td> sports </td>
<td> chemical </td>
</tr>
<tr>
<td> biological </td>
<td> Chinese language and literature </td>
<td> Physics </td>
<td> Self study </td>
<td> Self study </td>
</tr>
</table>
</body>
</html>

 Insert picture description here

Header cell

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th scope="col"> month </th>
<th scope="col"> amount of money </th>
</tr>
<tr>
<td scope="row">1</td>
<td>9</td>
<td>$100.00</td>
</tr>
<tr>
<td scope="row">2</td>
<td>4</td>
<td>$10.00</td>
</tr>
</table>
</body>
</html>

 Insert picture description here

5.3.2 Binding header 、 Information abbreviation

Binding header

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th id="name"> full name </th>
<th id="Email"> email </th>
<th id="Phone"> Telephone </th>
<th id="Address"> Address </th>
</tr>
<tr>
<td headers="name"> Zhang San </td>
<td headers="Email">[email protected]</td>
<td headers="Phone">13522228888</td>
<td headers="Address"> Chang'an Street, Beijing 38 Number </td>
</tr>
</table>
</body>
</html>

 Insert picture description here

Information abbreviation

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th> name </th>
<th> explain </th>
</tr>
<tr>
<td abbr="HTML">HyperText Markup Language</td>
<td> Hypertext markup language </td>
</tr>
<tr>
<td abbr="CSS">Cascading Style Sheets</td>
<td> Cascading style sheets </td>
</tr>
</table>
</body>
</html>

 Insert picture description here

5.3.3 Cell classification

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th axis="name"> full name </th>
<th axis="Email"> E-mail </th>
<th axis="Phone"> Telephone </th>
<th axis="Address"> Address </th>
</tr>
<tr>
<td axis="name"> Zhang San </td>
<td axis="Email">[email protected]</td>
<td axis="Phone">13522228888</td>
<td axis="Address"> Chang'an Street, Beijing 38 Number </td>
</tr>
</table>
</body>
</html>

 Insert picture description here

5.4 Project practice

5.4.2 Design product information list

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Choose a list of products —— EBay </title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header">
<p class="header-title"> Choose a list of products </p>
<div class="left-head"> <a id="goBack" href="javascript:history.go(-1);" class="tc_back"> <span class="inset_shadow"> <span class="header-return"></span> </span> </a> </div>
</header>
<section id="content">
<table cellspacing="0">
<tbody>
<tr>
<th> Name of commodity </th>
<th> Performance features </th>
<th> Price </th>
</tr>
<tr>
<td> Apple mobile phone iPhone8S(16GB)</td>
<td> Support mobile 4G、3G、2G, Free switching between two networks , Unprecedented online experience !</td>
<td class="last">¥6998.00</td>
</tr>
<tr>
<td> Samsung mobile phone Max( white )</td>
<td> Double card double waiting , Four core high speed processor </td>
<td class="last">¥6496.00</td>
</tr>
<tr>
<td> Xiaomi mobile phone Xiaomi 5( The stars are grey ) Mobile version </td>
<td> The fastest Xiaomi mobile phone so far .</td>
<td class="last">¥3099.00</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>

 Insert picture description here

版权声明
本文为[two billion one hundred and sixty-seven million nine hundred an]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/01/20210121192444676h.html

  1. css单位
  2. CSS unit
  3. 前端验证集合
  4. Front end validation collection
  5. Front end learning (4) -- response line, response head, response body
  6. Lesson 27: using time measuring tools to explore available spare time
  7. CSS 单位
  8. CSS unit
  9. 前端工具集合
  10. Front end Tools Collection
  11. Introduction to HTTP message format
  12. Introduction to new features of HTML5
  13. Common instructions for Vue
  14. Introduction of bootstrap Blazer component library
  15. HTML5 速览
  16. HTML5 quick view
  17. HTML表格自动排序
  18. For less than $1700, create a private cloud with openstack
  19. Basic learning of JavaScript (1)
  20. 前端编程之路一一HTML标签分类
  21. Front end Programming: HTML tag classification
  22. ColSpan and rowspan merging cells of HTML form elements
  23. JavaScript 日期时间格式化
  24. JavaScript date time formatting
  25. Classification of front end interview questions - html2
  26. CSS block elements
  27. HTML5 form detailed tutorial
  28. HTML5新增的元素表
  29. New element table in HTML5
  30. 3D轮播插件vue-carousel-3d非官方最全文档
  31. 3D carousel plug-in vue-carousel-3d
  32. Uniapp (Vue general) integrates Tencent location service SDK -- multi platform small program general
  33. Slowhttptest slow attack tool use details
  34. HTML summary (2)
  35. Overview of CSS3
  36. Front end abnormal monitoring system
  37. 免费网站部署和免费数据库Serverless云存储资源汇总整理
  38. Free website deployment and collection of free database serverless cloud storage resources
  39. Vux form -- a form solution of base vux
  40. 可以直接用于HTML中的特殊字符表 unicode字符集
  41. Can be directly used in HTML special character table Unicode character set
  42. Detailed explanation of HTTP protocol
  43. HTTP request header and request response header
  44. CSS background深度解析
  45. Python web/HTML GUI
  46. Front end standard 2: HTML you know and don't know
  47. Some HTML tags
  48. HTML标签之table
  49. Table of HTML tag
  50. DataTables of jQuery plug-in
  51. Unity calls Google's free translation API (HTTPS interface). Young people don't speak martial arts. How can they speak in multiple languages
  52. Linux entry most commonly used commands, do not learn a bunch of useless commands
  53. Piziheng embedded: a list of common short-range wireless communication protocols (Wi Fi / Bluetooth / ZigBee / thread...)
  54. Naming rules for the front end team of ladder
  55. HTML logo related symbols
  56. Node . JS: development resources and technology stack arrangement
  57. Unity calls Google's free translation API (HTTPS interface). Young people don't speak martial arts. How can they speak in multiple languages
  58. Straighten out JavaScript (18) - statements and operators
  59. Employment information statistics network (interface document)
  60. css selector