html 表格和表單知識點
1、使用表單標籤
網站使用 HTML 表單可與使用者進行互動，表單元素是允許使用者在表單中輸入內容，比如：文字框、文字域、單選框、複選框、下拉列表、按鈕等等，表單可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。表單使用表單標籤 <form> 來定義：
<form method="傳送方式" action="表單提交地址" name="表單名稱"></form>
accept-charset 屬性規定伺服器可處理的表單資料字符集。預設值是保留字串 "UNKNOWN"，表示編碼為包含 <form> 元素的文件的編碼。
enctype 屬性規定在將表單資料傳送到伺服器之前如何對其進行編碼。注意：只有 method="post" 時才使用 enctype 屬性。
下面是2個新屬性：
autocomplete 屬性規定表單是否應該啟用自動完成功能。自動完成允許瀏覽器預測對欄位的輸入。當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。注意：autocomplete 屬性 "on" 適用於表單，"off" 適用於特定的輸入欄位，反之亦然。預設值為 on 規定啟用自動完成功能。瀏覽器會基於使用者之前鍵入的值自動完成值。off 則規定禁用自動完成功能。使用者必須在每次使用時輸入值到每個欄位中，瀏覽器不會自動完成輸入。
novalidate 屬性規定當提交表單時不對錶單資料進行驗證。
From 中的 Get 和 Post 方法：
(1)、Get 方式將表單中資料的按照 var=value 的形式，新增到 action 所指向的 URL 後面，並且兩者使用“?”連線，而各個變數之間使用“&”連線；而 Post 方式是將表單中的資料放在 form 的資料體中，按照變數和值相對應的方式，傳遞到 action 所指向的 URL。如下 Get 方式傳送：
http://www.abc.com/demo.php?name=小白&password=12345678
(2)、Get 方式是不安全的，因為在傳輸過程，資料被存放在請求的 URL 地址中，這樣容易造成資訊洩漏。
(3)、Get 方式傳輸的資料量非常小，一般限制在 2KB 左右，但是執行效率卻比 Post 方法好；而 Post 方式傳遞的資料量相對較大，它是等待伺服器來讀取資料，不過也有位元組限制，這是為了避免對伺服器用大量資料進行惡意攻擊，因此建議儘量使用 Post 方法傳送資料，比如使用者註冊，使用 Get 方法請求資料，比如瀏覽貼子。
2、文字框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文字輸入框，文字框也可以轉化為密碼輸入框。輸入域通過 <input> 標籤完成，該標籤規定了使用者可以在其中輸入資料的輸入欄位。輸入欄位可通過多種方式改變，取決於 type 屬性。如下：
1 <form method="post" action="demo.php"> 2 <label for="name">使用者名稱:</label> 3 <input type="text" name="username" id="name" value="小白"><br/> 4 <label for="pass">密 碼:</label> 5 <input type="password" name="password" id="pass" placeholder="請輸入密碼"> 6 </form>
<input> 標籤用於定義輸入域，而 type 屬性規定了要顯示的輸入域的內容，type="text" 為預設值，定義一個單行的文字欄位輸入，預設顯示寬度為 20 個字元。 name 屬性為文字框命名，以備後臺程式呼叫。type="password" 定義密碼欄位，密碼欄位字元不會明文顯示，而是以星號或圓點替代。
value 屬性可為文字框設定預設值，一般起到提示的作用，value 屬性對於不同 input 型別，用法也不同：
(1)、對於 "text"、"password"、"hidden" 型別，定義輸入欄位的初始（預設）值。
(2)、對於 "button"、"submit"、"reset"、型別，定義按鈕上的文字。
(3)、對於 "checkbox"、"radio"、"image" 型別，則定義與 input 元素相關的值，當提交表單時該值會發送到表單的 action URL。
注意：value 屬性對於 <input type="checkbox"> 和 <input type="radio"> 是必需的，不適用於 <input type="file">。
而 placeholder 屬性則可規定輸入欄位預期值的簡短的提示資訊，比如一個樣本值或者預期格式的短描述，該提示會在使用者輸入值之前顯示在輸入欄位中，該值顯示為虛體，顏色淺，當用戶輸入時自動清除，而用於 <input type="text" value="小白"> 的 value 屬性的預設值顯示為實體，而且顏色深，在使用者輸入時需要自行清除。placeholder 屬性適用於下面的 input 型別：text、search、url、tel、email 和 password。
<label> 標籤則為 input 元素定義標記，一般為輸入標題。<label> 標籤不會向用戶呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在該標籤內點選文字，就會觸發此控制元件。就是說，當用戶單擊選中該 <label> 標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上（就自動選中和該 <label> 標籤相關連的表單控制元件上）。for 屬性規定 label 與哪個表單元素繫結，該屬性的值應當與繫結元素的 id 屬性值相同。如下：
1 <form method="post" action="demo.php"> 2 <label for="male">男</label> 3 <input type="radio" id="male" name="gender"><br/> 4 <label for="female">女</label> 5 <input type="radio" id="female" name="gender"><br/> 6 <label for="email">郵箱</label> 7 <input type="email" id="email" placeholder="請輸入郵箱地址"> 8 </form>
3、文字域
文字域是一個多行的文字輸入控制元件，當用戶需要在表單中輸入大段文字時，需要用到文字輸入域。文字域通過 <textarea> 標籤完成，如下：
1 <form method="post" action="demo.php"> 2 <label for="txt">發表意見：</label><br/> 3 <textarea cols="50" rows="10" id="txt">在這裡輸入內容...</textarea> 4 </form>
注意：<textarea> 標籤是一對閉合標籤，成對出現，在開始標籤和結束標籤之間可以輸入預設值，cols 和 rows 屬性則定義文字域的行數和列數，更好的辦法是使用 CSS 的 width 和 height 屬性來定義文字與的大小，width 代替 cols，height 代替 rows。
4、選擇框
選擇框可以讓使用者做出選擇，在使用表單設計調查表時，為了減少使用者的操作，使用選擇框是一個好主意，HTML 中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項使用者只能選擇一項，而複選框中使用者可以任意選擇多項，甚至全選。定義選擇框通過 <input> 標籤完成，不同的是輸入型別。
(1)、單選框
type="radio" 定義了單選框，也叫單選按鈕，允許使用者在一定數量的選擇中選取一個選項。如下：
1 <form method="post" action="demo.php"> 2 <label for="love">喜 歡</label> 3 <input type="radio" id="love" name="like" value="喜歡" checked><br/> 4 <label for="noLove">不喜歡</label> 5 <input type="radio" id="noLove" name="like" value="不喜歡"><br/> 6 <label for="casual">無所謂</label> 7 <input type="radio" id="casual" name="like" value="無所謂"><br/> 8 </form>
(2)、複選框
type="checkbox" 定義了複選框，允許使用者可以選擇多個選項。如下：
1 <form method="post" action="demo.php"> 2 <label for="tool1">自行車</label> 3 <input type="checkbox" id="tool1" name="bike" value="自行車"><br/> 4 <label for="tool2">汽 車</label> 5 <input type="checkbox" id="tool2" name="car" value="汽車"><br/> 6 <label for="tool3">飛 機</label> 7 <input type="checkbox" id="tool3" name="plane" value="飛機" checked><br/> 8 <label for="tool4">火 箭</label> 9 <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/> 10 <label for="tool5">毛 線</label> 11 <input type="checkbox" id="tool5" name="wool" value="毛線"> 12 </form>
value
屬性值是必需的，為提交資料到伺服器的值，供後臺程式使用。name 屬性為輸入控制元件命名，供後臺程式使用，checked 屬性規定在頁面載入時應該被預先選定的 <input> 元素。該屬性只適用於 <input type="radio"> 和 <input type="checkbox">。checked 屬性用於設定預設選項，即該選項會被預設選中。該屬性也可以在頁面載入後，通過 JavaScript
程式碼進行設定。
注意：同一組的單選按鈕，name 屬性取值一定要一致，比如上面例子為同一個名稱“like”，這樣同一組的單選按鈕才可以起到單選的作用。同一組的複選框，name 屬性取值可以一致，這樣方便為其定義樣式，或者通過 JS 獲取元素。
5、下拉列表框
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、也可以多選。下拉列表框通過 <select> 標籤 和 <option> 標籤完成。
(1)、下拉列表單選框
1 <form method="post" action="demo.php"> 2 <label for="like">喜歡：</label> 3 <select id="like" name="cars"> 4 <option value="奧迪">奧迪</option> 5 <option value="寶馬">寶馬</option> 6 <option value="賓士">賓士</option> 7 <option value="賓利">賓利</option> 8 <option value="路虎">路虎</option> 9 </select> 10 </form>
(2)、下拉列表複選框
1 <form method="post" action="demo.php"> 2 <label for="like">喜歡：</label> 3 <select id="like" name="cars" multiple> 4 <option value="奧迪">奧迪</option> 5 <option value="寶馬">寶馬</option> 6 <option value="賓士">賓士</option> 7 <option value="賓利">賓利</option> 8 <option value="路虎" selected>路虎</option> 9 </select> 10 </form>
<select> 標籤定義下拉列表選項，而 <option> 標籤定義下拉列表中的選項。
下拉列表單選框和下拉列表複選框，唯一的不同就是複選框使用了 multiple 屬性實現了多選功能，下拉列表可以進行多選操作就是在 <select> 標籤中設定了 multiple 屬性，該屬性用於規定可同時選擇多個選項，需要注意：下拉列表框根據選項的個數(單選/複選)，會在網頁上呈現不同的顯示效果。在不同的作業系統，選擇多個選項的方法也不同，在 windows 作業系統下，需要按住 Ctrl 鍵來選擇多個選項，而在 Mac 系統下，需要按住 Command 鍵來選擇多個選項。
<option> 標籤的 value 屬性值為向伺服器提交的值，selected 屬性則表示該選項被預設選中，即首次在列表中時表現為選中狀態。該標籤需要與 <select> 標籤配合使用，否則這個標籤是沒有任何意義的。
<select> 元素是一種表單控制元件，可用於在表單中接受使用者輸入。還元素有幾個重要屬性，required 屬性規定使用者在提交表單前必須選擇一個下拉列表中的選項。autofocus 屬性規定在頁面載入時下拉列表自動獲得焦點。size 屬性規定下拉列表中可見選項的數目。由於各屬性之間的差異，需要告訴使用者是否可以多項選擇，對使用者更友好的方式是使用複選框。
如果有很多的選項組合，就可以使用 <optgroup> 標籤能夠很簡單的將相關選項組合在一起。該標籤經常用於把相關的選項組合在一起。如下：
1 <form method="post" action="demo.php"> 2 <label for相關推薦
html 表格和表單知識點
1、使用表單標籤 網站使用 HTML 表單可與使用者進行互動，表單元素是允許使用者在表單中輸入內容，比如：文字框、文字域、單選框、複選框、下拉列表、按鈕等等，表單可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。表單使用表單標籤 <form> 來定義：
【HTML基礎】表格和表單
天津 adding 文字 最小 words 常見 jpg checked 搜索引擎 本次博客的主要內容如下： meta和link 表格 表單 meta和link meta meta的屬性有兩種：name和http-equiv。 name屬性主要用於描述
HTML表格，表單和框架
表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
表格和表單
radio 最大 play 無法 utf 打開方式 新窗口 doc -a 表格是一個組合標簽，用來布局，兼容性好；現在布局思路大多數是div+Css。 對於表格標簽做了一下概述，認識一下。表格的頭部<thead></thead，和<tfoot&g
css美化表格和表單樣式
Css美化表格和表單樣式 表格建立預設是沒有邊框的，我們要用boder屬性去設定表格的邊框 表格基本樣式 表格邊框合併boder-collapse 在顯示錶格時,通常來說表格都是有邊框的,邊框的作用:主要用來界定不同的資料。當表格的border屬性的值大於0的時
HTML表格與表單
表格標籤table tr 代表一行 td 代表一列，以下是一個一行兩列的標籤 <table> <tr> <td></td> <td></td> </tr> </table> tr不能設
Bootstrap(4)之表格和表單
首先來說一下表格，bootstrap的表格 有專門的class="table"。<table class="table table-hover table-bordered "> <caption>Table基本案例</cap
表格和表單、表單的基本結構、表單元素、表單的高階應用、表單語義化
技能目標 掌握表格的基本用法 掌握表單的用法 掌握CSS的高階選擇器的用法 表格的基本結構 <table> 行 <tr> 列 單元格 <td> 表
5.22 HTML 列表標簽和表單標簽
AC 向上 style tin ddl 檢查 login ack 通過 1，ul無序列表 標簽 ul：unordered list ，就是無序列表的意思。 li: listitem 列表項的意思。無序列表的每一項都是<li>。 <!DOCTYPE h
HTML+CSS專案課2：利用table和表單製作“網易郵箱註冊頁面”
知識點：html文件基本結構、table標籤佈局、表單標籤的使用、img標籤、a標籤、p標籤等常見標籤的使用。 製作網頁效果： 網頁製作思路： 1、將整個網頁分成4部分：3個表格+底部段落文字（3個表格設定同樣的寬度，水平居中，邊框為0等屬性） 2、表格1
前端html--超連結，表格，表單屬性
1. 圖片與超連結 1. 圖片標籤 <img src=""> 預設按照圖片原始尺寸顯示 標籤屬性 ： 1. width : 取px為單位的畫素值，設定圖片寬度 2. height : 取畫素值，設定圖片的高度 3. title : 用來設定滑鼠懸停於圖片上方時的顯示文字 4. alt : 當圖片載
【Html】在表單（input）中id和name的區別
但是name在以下用途是不能替代的： 1. 表單(form)的控制元件名，提交的資料都用控制元件的name而不是id來控制。因為有許多name會同時對應多個控制元件,比如checkbox和radio,而id必須是全文件中唯一的。此外瀏覽器會根據name來設定傳送到伺服器的r
前端筆記—從入門到墳墓[HTML+CSS][表格與表單]
表格 <table>標籤常用屬性：cellspacing設定單元格之間的距離，cellpadding設定單元格內容到單元格邊的距離，border設定單元格邊框寬度。 注：以上屬性單位皆為px。 <td>標籤常用屬性：colspan設定
HTML常用行標籤和表單控制元件
HTML常用的行級標籤 行內元素不獨佔一行 HTML連結 a標籤 href屬性是必須要的屬性，target指定連線以何種方式開啟，_blank用新視窗開啟，預設是self原視窗開啟。 <a href="連結" target="_blank">連結文字</a&
html 提交表單，圖片和文字一起提交，圖片存入伺服器，圖片地址和表單資訊存入資料庫，帶後端php程式碼
html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no
HTML中關於表單的提交和輸入的值是否為空
文章出處：http://blog.csdn.net/lvhuiyang/article/details/53192277 html的預設方式提交 <form action="/server_url" method="post" id="form"><
2-HTML中的表格及表單控制元件
自己總結： 讓圖片和外部文字 出現間隙 使用hspace[水平]和vspace[垂直]屬性 img(標籤中使用)-->usermap="#myMap" 屬性-->設定熱點 可以使用DW中-->(視窗)屬性-->進行熱點在圖片中的定位（DW會自動生成程
html中form表單的使用方法和介紹
2，對於type=”radio”來說，如果你只想選擇一個，需要給每個input新增一個name屬性，屬性值也必須一致，如果不新增，就不能滿足單選框的需求。 3，關於單行文字的寬度，可以使用size屬性來設定，表示字元長度，實際上不用，我們一般是通過CSS進行控制的。 （3）select和option 作
HTML常用標籤及表格、表單、列表
1:HTML常用標籤 <a href=" ">這是一個連結</a> //href="#"空連結 <a href=" " target="_blan
Html-超連結、表格、表單
一. 超連結（a 標籤） 1. 超連結： 用來進行頁面之間的跳轉，其中href=“”需要指定要跳轉的連結頁面 target: _self:在當前頁面進行重新整理(預設) _blank:開啟一個新的頁面進行重新整理 _parent:在