HTML: tables and forms

form

<table> define table

<caption> Define the table caption, which must immediately follow <table>

<tr> The row in the table, <tr> contains one or more <th> or <td>

<th> Header cell, the text in <th> is usually centered bold text

<td> Standard cell, the text in <td> is usually in normal font, and left aligned

Attributes

<table></table>

border: the border of the table

width: the width of the table

cellpadding: the distance between the cell border and the cell content

cellspacing: spacing between cells

bordercolor: border color

bgcolor: background color

<tr></tr>

align (left / center / right): horizontal alignment (left center and right)

valign (top / middle / bottom): vertical alignment (upper, middle, lower)

height: height

bgcolor: background color

<td></td>

height: height

width: width

align (left / center / right): horizontal alignment

valign (top / middle / bottom): vertical alignment

bgcolor: background color

layout

<thead>, <tbody>, <tfoot> represent the table header, body, and footnotes in sequence. By default, these three tags will not affect the layout of the table

If you want to use these three tags, you must use three together, and the order cannot be reversed

<table border="1">
	<thead>
		<tr>
			<th>月份</th>
			<th>利润</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>一月</td>
			<td>三万元</td>
		</tr>
	</tbody>
	<tfoot></tfoot>
</table>

Merge Cells

<th> and <td> have two important attributes that can be used to merge cells

colspan: merge cells horizontally

rowspan: merge cells vertically

<table border="1">
	<tr>
		<th rowspan="3">一季度</th>
		<td>一月</td>
		<td>5万元</td>
	</tr>
	<tr>
		<td>二月</td>
		<td>3万元</td>
	</tr>
	<tr>
		<td>三月</td>
		<td>4万元</td>
	</tr>
	<tr>
		<th>总额</th>
		<td colspan="2">12万元</td>
	</tr>
</table>

Form

<form> defines a form, which is used to transfer data to the server, the form is usually placed in the form

name: used to define the name of the form

action: a URL that defines where to send data when submitting the form

method: defines the HTTP method (get / post) when sending form data

The difference between post and get

Get can only submit a small amount of data, and post can carry a large amount of data;

The data submitted by get will be displayed in the address bar, the security is poor, and the post method is more secure.

Input <input />

<input /> Input form, use the type attribute to define different elements:

Text text and password password

name: the name of the input element (only form elements with the name attribute set can pass their value when submitting the form)

value: defines the initial value of the input field

size: defines the width of the input field

maxlength: defines the maximum length of input characters

<form action="" method="post">
	账号: <input type="text" name="account" value="superman" />			
</form>

Submit

The submit button will send the form data to the server

<input type="submit" value="提交" />

Reset

The reset button will clear all data in the form

<input type="reset" value="重置" />

Start JS program button

button is a clickable button, commonly used to start JavaScript programs

Picture form image

image is used to define the submit button in the form of an image, which needs to be used in combination with the src attribute and the alt attribute

Radio box and checkbox

The name value of a group of radio or a group of checkboxes should be the same

radio and checkbox must set the value attribute

<form>
	性别:<input type="radio" name="gander" value="male" checked="checked" />男
	<input type="radio" name="gander" value="female" />女
	<hr />
	爱好:<input type="checkbox" name="hobby" value="game" checked="checked" />玩游戏
	<input type="checkbox" name="hobby" value="reading" checked="checked" />读书
	<input type="checkbox" name="hobby" value="skiing" />滑雪	
</form>

File upload

The value attribute cannot be set when using file, and the type of the submitted file can be specified using the accept attribute

<form>
	<input type="file" name="pic" accept="image/gif" />
</form>

Hidden field

Invisible to users, hidden fields usually store a default value

<form>
	<input type="hidden" name="country" value="China" />
</form>

summary

For different <input> types, the meaning of the value attribute is also different

• type = "button", "reset", "submit": define the text displayed on the button
• type = "text", "password", "hidden": define the initial value of the input field
• type = "checbox", "radio", "image": define the value associated with the input
• The value attribute must be set in checbox and radio, and the value attribute cannot be used in file

Drop-down list <select> <select />

<select> is used to create a drop-down list, <option> is the option

<select> Attribute

multiple: set multiple selection

size: Set the number of visible options

<option> attribute

selected: set to selected state

value: the attribute value sent to the server

<select name="fruit">
	<option value="apple">苹果</option>
	<option value="banana" selected="selected">香蕉</option>
	<option value="orange">橙子</option>
	<option value="pear">梨</option>
</select>

Text input control <textarea> <textarea />

<textarea> is a text input control used to define multiple lines of text. Common attributes include

clos: the number of columns in the text area

rows: the number of rows in the text area

disabled: Disable the text area

readonly: the text area is read-only

<textarea rows="5" cols="10" disabled="disabled">这是一个被禁用的文本区</textarea>
<textarea rows="5" cols="10" readonly="readonly">这是一个只读的文本区</textarea>
<textarea rows="5" cols="10">这是一个可以编辑的文本区</textarea>

Other attributes of form elements

size (size): text, password

maxlength (maximum length): text, password, textarea

checked (whether checked): radio, checkbox

selected (selected): option

readonly（只读） ： text、password、textarea、readonly="readonly"

disabled（禁用） ： text、password、radio、checkbox、textarea、button、submit、reset 等

HTML5 new form elements and attributes

Form element

<input type="#" name="" value=""/>

#:

color: color

numbe: numerical value (value, max, min, step increment)

tel: phone

email: mail

url: URL

date: date year month day

month: year month

week: year week

time: time

datetime: year, month, day, time

datetime-local: year, month, day, and time

range: range (value, max, min, step)

search: search

Form properties

required: required

autofocus: auto focus

autocomplete: automatic completion (off, on)

multiple: multiple choice

list: list

formaction: change the submission address

formmethod: change the submission method

max: maximum value

min: minimum value

step: increment

placeholder: text message

Label classification

Block-level elements (big boxes)

div form table ul li ol dl dt dd h1-h6 p header footer nav figure section address aside hgroup hr br iframe

1. Stand alone
2. Block level can nest all elements (h1-h6 p dt can not nest block level elements, you can nest inline elements and inline block elements)
3. Block-level elements have width and height

Inline elements (small boxes)

span a strong b i em time audio label

1. Show on the same line
2. Inline elements cannot nest block-level elements, but inline elements and inline block elements can be nested (a can block-level elements)
3. Inline elements have no width and height

Inline block-level elements (small boxes)

img input select textarea video

1. Show on the same line
2. Has width and height