table(表格)
td:table data cell即一个单元格
tr:table row代表一行表格
th:table heading即表的标题
<h1>Heaviest Birds</h1>
<table>
<tr>
<th>Animal</th>
<th>avg ms</th>
<th>max ms</th>
<th>flighted</th>
</tr>
<tr>
<td>Ostrich</td>
<td>104(230)</td>
<td>156.58</td>
<td>No</td>
</tr>
<tr>
<td>SO</td>
<td>90(200)</td>
<td>130</td>
<td>No</td>
</tr>
<tr>
<td>WT</td>
<td>55</td>
<td>114</td>
<td>Yes</td>
</tr>
</table>
thead、tbody、tfooter:将table分区里面放置对应的内容
columspan、rowspan:将单元格分列或分行,第一个和第三个标题占两行,而第二个占两列
<thead>
<tr>
<th rowspan="2">Animal</th>
<td colspan="2">Average Mass</td>
<th rowspan="2">flighted</th>
</tr>
<tr>
<td>KG</td>
<td>LB</td>
</tr>
</thead>
Form
不体现在网页上,只是一个容器,用来装输入框,勾选框,按钮等
form的作用:传送输入form的数据
input
20多种输入方式:通过type参数来决定,placeholder显示默认的字
<form action="/tacos">
<input type="text" placeholder="username">
<input type="password" placeholder="enter ur pwd">
<input type="color">
<input type="number">
</form>
label标签
id应该是唯一的
<label for="username">Enter a Username</label>
<input id="username" type="text" placeholder="username"> 此处的id放到上一行的for中,说明label for的是id
buttons按键
如果不特殊说明,按下按钮,默认会提交整个form
<button>Submit</button>
<input type="submit" value=“click me”>//和第一行一样的功能,如要改变按键上字用values属性
<button type="button">dont submit the form</button> //type属性为button不会提交整个表单
Name属性
<!file:///F:/tacos?username=mmi1133>
<p>
<label for="uname">Enter a Username</label>
<input id="uname" type="text" placeholder="username" name="username">//如果输入mmi1133,再提交,username=mmi1133,name属性代表是input的内容
</p>
多个输入
file:///F:/tacos?username=Wng&password=22222&color=%23ac6262
用reddit搜索
<form action="https://www.reddit.com/search/">
<p>
<label for="query">reddit</label>
<input type="text" name="q" id="query">
<button>search</button>
</p>
</form>
<form action="https://www.google.com/search">
<p>
<label for="query">google</label>
<input type="text" name="q" id="query">
<button>search G</button>
</p>
</form>
checkboxes,radio buttons,select
checkboxes:
<p>Choose your monster's features:</p>
<div>
<input type="checkbox" id="scales" name="scales"
checked>// 初始状态是勾选还是没勾选
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns">
<label for="horns">Horns</label>
</div>
radio buttons:与checkboxes区别,只能选一
如何让多个选项联系起来,name取一个值;value要设定好,才能在提交表单时,提交正确的信息
<p>
<label for="xs">XS:</label>
<input type="radio" name="size" id="sm" value="lolol">//file:///F:/birds?size=lolol
<label for="s">S:</label>
<input type="radio" name="size" id="s">
<label for="M">M:</label>
<input type="radio" name="size" id="m">
</p>
select 是一种元素,value元素是表单提交时会使用的
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog" selected>Dog</option>//selected代表提前选中
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
file:///F:/birds?meal=fish2:for和id是一对,name和form是一对
range
<input type="range" id="volume" name="volume"
min="0" max="11" step="7" >//拖动一次,7为单位
<label for="volume">Volume</label>
file:///F:/birds?meal=fish&volume=21
textarea
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">//页面上框的尺寸
It was a dark and stormy night...
</textarea>
validation
对输入的限制:大小写、是不是mail
利用required属性
<h2>validation demo</h2>
<form action="dummp">
<label for="first">enter first name</label>
<input type="text" name="first" id="first" required>
<label for="username">username </label>
<input type="text" name="username" id="username" minlength="5" maxlength="20" required>//必须最大或最小长度
<button>submit</button>
</form>
pattern 属性:
<input type="email" required>
练习:马拉松表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Race Registration</title>
</head>
<body>
<h1>Race Registration</h1>
<form action="/register">
<p>
<label for="First">First Name</label>
<input type="text" name="First_Name" id="First" required>
<label for="Last">Last Name</label>
<input type="text" name="Last_Name" id="Last" required>
</p>
<p>Select a Race</p>
<p>
<input type="radio" name="slcRace" id="F1" value="5000">
<label for="F1">Fun Run 5k</label>
</p>
<p>
<input type="radio" name="slcRace" id="F2" value="Half">
<label for="F2">Half Marathon</label>
</p>
<p>
<input type="radio" name="slcRace" id="F3" value="Full">
<label for="F3">Full Marathon</label>
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
</p>
<p>
<label for="agegrp">Select Age Group</label>
<select name="agegrp" id="agegrp">
<option value="17" selected>under 18</option>
<option value="18">18-30</option>
<option value="30">30-50</option>
<option value="50">50+</option>
</select>
</p>
<button>Register!</button>
</form>
</body>
</html>