第三篇 HTML 表單及表格
阿新 • • 發佈：2019-02-06
表單及表格
表單，常用在登入、註冊等地方，這也是一個最基本的。 我們就用登入，來學習什麼是表單！ 表單 form 標籤，在某些好用的編輯工具，比如：WebStorm 你在上面寫出form再按下 鍵盤左側的‘Tab’鍵，會直接彈出form的開始和結束標籤，其他元素 div table span 等都是一樣的，還會彈出此元素必要的 屬性， 比如img 按下 ‘Tab’ 就會彈出 這樣的 <img src="' alt="" /> 它會直接幫你寫好。 來吧，繼續說form表單，因為是介紹給入門同學的，所以就先不涉及後臺驗證和JS驗證，還有資料庫連線等操作了。就先實現最基本的靜態 表單樣式，各位同學，寫程式碼也不要光想著隨便寫出來，還要想著可擴充套件性。先不考慮複雜的，用最基本的 form驗證，得按照form表單的規則，用input來寫文字框，最後 用submit來提交，別隨便用其他標籤寫，就把前端的形式給展現出來，那麼後期你擴充套件，和後臺互動，就麻煩了，還要去寫JS事件轉換，ajax等非同步處理。所以我們在編寫一個程式的時候，先考慮怎麼寫，把自己會的都往上面加，然後想到一個最簡單的方式。。。<form action="#" method="post">
<p>
使用者名稱： <input type="text" />
</p>
<p>
密碼： <input type="password" />
</p>
<p>
<input type="submit" value="登入" />
</p>
</form
以上程式碼，就是最簡單的登入，那麼我們來解釋一下這裡的程式碼，是什麼意思：
裡面我們用到了 p標籤，因為它是段位，會跨行，上下會有一點間距，所以用來把 使用者名稱、密碼、登入按鈕 給分割開。在使用者名稱後面 我們用到了 input標籤，它是專門寫文字框的，標準情況下，它是在form表單裡的，寫在外面的話會包語法錯誤，而input 有一個 type的屬性，這也是關鍵，它的值很多， text 是代表文字框，可以輸入 可見的 內容，而password 是密碼，輸入的話，使用者就看不見，只會呈現出密碼的樣式， submit是表單提交按鈕的意思，value則是它的值，如果沒有設定
value的話，submit是預設“提交”兩個字。 細心的同學不光是注意form表單內部，還會注意它本身，看到 action="#" 和 method="post" 了嗎？ action是url(地址)指向，就是我們表單提交後，它會走向哪裡， method是它的提交方式，gat和post， post的安全性比gat高，它們的區別，大家去網上找找，這裡我就不多說了。<table>
<tr>
<th>編號</th><th>使用者名稱</th><th>QQ</th>
</tr>
<tr>
<td>1</td>
<td>龍楓</td>
<td>563292416</td>
</tr>
<tr>
<td>2</td>
<td>同學</td>
<td></td>
</tr>
</table>
不懂的同學，就寫一段相同的程式碼測試。我們就來解釋下，table表格裡的標籤是什麼意思：
tr也是活在table下面的，它如同塊級元素，是可跨行的，它是控制 td、th的，內容都是 td和th提供的，他們則是行級元素。th的字型比td深，就是加粗過的，一般就用與表格裡的分類一樣，td則是純內容。他們會對齊的哦，一個tr下的td會對應下面一個tr裡的td，他們是一列對應的。table也有屬性，但也屬於css樣式，我們就先不管，在這裡就先做出一個最基本的表格。