HTML03

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>

input type

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 属性：

HTML attribute: 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>