[Udemy推薦課程] Day 3 The Web Developer Bootcamp 2021 [轉職軟體工程師，自學程式語言]
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/ 今天大綱如下 : ➤ Table ➤ form ➤ input ➤ lable ➤ button ➤ "Hijacking" Google & Reddit's Search ➤ Radio Buttons, Checkboxes, & Selects ➤ select |
➤ Table
<table>
HTML的 table 元素表示表格數據 — 即通過二維數據表表示的信息。
詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
➤ form
<form>
HTML <form> 元素表示提交訊息的區塊，此區塊含有許多可互動的控制項。
詳細資訊請見 https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/form
<form> 元素本身是一個外殼或容器，沒有任何視覺影響。
然後我們用一系列輸入、複選框、按鈕等填充表單。
表單元素“表示包含用於提交信息的交互式控件的文檔部分”。
action 屬性指定表單數據應該發送到哪裡。
method 屬性指定應該使用哪個 HTTP 方法（暫時不要擔心）
它是一個盒子。那就是表單本身就是容器，上面有一個標籤，上面寫著將這些數據發送給我的服務器網絡公司或將其發送至搜索或什麼的。傘是將信息發送到的某個目的地。在這一點上，我們所知道的只是基本的 HTML。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ input
<input>
HTML <>用於建立基於 Web 的表單的互動式控制項，以便接受來自用戶的數據。
詳細資訊請見
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
text : 單行文本字段。 換行符會自動從輸入值中刪除。
email : HTML5 用於編輯電子郵件地址的字段。
submit : 提交表單的按鈕。
password : 值被隱藏的單行文本字段。 使用 maxlength 屬性指定可以輸入的值的最大長度。
color : HTML5 用於指定顏色的控件。 除了接受簡單的顏色作為文本（更多信息）之外，顏色選擇器的 UI 沒有任何必需的功能。
number : HTML5 用於輸入數字的控件。
month : HTML5 用於輸入月份和年份的控件，沒有時區。
time : HTML5 用於輸入沒有時區的時間值的控件。
placeholder : 給使用者一個 hint ，讓他知道要打甚麼資料
required : 一定要輸入，沒輸入不能 run
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ lable
<label>
HTML <label> 元素（標籤）表示用戶界面中某個元素的說明。
將一個 <label> 和一個 <input> 元素相關聯主要有這些優點：
標籤文本不僅與其相應的文本輸入元素在視覺上相關聯，程序中也是如此。這意味著，當用戶聚焦到這個表單輸入元素時，屏幕閱讀器可以讀出標籤，讓使用輔助技術的用戶更容易理解應輸入什麼數據。
你可以點擊關聯的標籤來聚焦或者激活這個輸入元素，就像直接點擊輸入元素一樣。這擴大了元素的可點擊區域，讓包括使用觸屏設備在內的用戶更容易激活這個元素。
將一個 <label> 和一個 <input> 元素匹配在一起，你需要給 <input> 一個 id 屬性。而 <label> 需要一個 for 屬性，其值和 <input> 的 id 一樣。
另外，你也可以將 <input> 直接放在 <label> 裡，此時則不需要 for 和 id 屬性，因為關聯已隱含存在
name : 表單的名稱。 該值不能是空字符串，並且在它所在的表單集合中的表單元素中必須是唯一的（如果有）。
以下舉例示範 :
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ button
<button>
HTML <button> 元素表示一個可點擊的按鈕，可以用在表單或文檔其它需要使用簡單標準按鈕的地方。默認情況下，HTML按鈕的顯示樣式接近於 user agent 所在的宿主系統平台（用戶操作系統）的按鈕， 但你可以使用 CSS 來改變按鈕的樣貌。
name : button的名稱，與表單數據一起提交。
button 和 submit
點擊 <button> 會讓瀏覽器和操作系統（默認情況下）將焦點放在其上。 <input> 的 type="button" 和 type="submit" 也是一樣的。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ "Hijacking" Google & Reddit's Search
我們將為 Google 以及可能的 YouTube 構建我們自己的搜索表單，我們可以在那裡
從我們的表單向他們的服務器發送數據，然後最終得到一個搜索頁面。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Radio Buttons, Checkboxes, & Selects
<input type="radio">
<input> 的 radio 類型元素默認渲染為小型圓圈圖表，填充即為激活，類似於之前描述額複選框（checkbox）類型。單選按鈕允許你選擇單一的值來提交表單。
<input type="checkbox">
複選框類型的 <input> 元素默認呈現為在激活時被選中（打勾）的框，就像您在官方政府紙質表格中看到的那樣。 確切的外觀取決於運行瀏覽器的操作系統配置。 通常這是一個正方形，但它可能有圓角。 複選框允許您選擇單個值以在表單中提交（或不選擇）。
<select>：HTML 選擇元素
HTML <select> 元素表示一個提供選項菜單的控件：
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ select
<select>
HTML <select> 元素表示一个提供选项菜单的控件：
上述例子展示了 <select> 的典型用法。元素中設置了 id 屬性以將其與 <label> 元素關聯在一起，提高可及性（accessibility）。 name 屬性表示提交到服務器的相關數據點的名字。每個菜單選項由 <select> 中的一個 <option> 元素定義。
每個 <option> 元素都應該有一個 value 屬性，其中包含被選中時需要提交到服務器的數據值。如果不含 value 屬性，則 value 值默認為元素中的文本。你可以在 <option> 元素中設置一個 selected 屬性以將其設置為頁面加載完成時默認選中的元素。
<select> 元素有一些用於控制元素的特有屬性，例如 multiple 規定了能不能同時選中多個選項，size 規定了一次性顯示多少選項。這個元素也支持大多數常見的表單輸入元素屬性，如 required, disabled, autofocus 等。
你還可以將 <option> 元素放在 <optgroup> 元素中以為下拉菜單創建不同的選項分組。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
➤ Range & Text Area
<input type="range">
類型範圍的<input>元素使用戶可以指定一個數值，該數值必須不小於給定值，並且不得大於另一個給定值。 然而，精確值並不重要。 通常使用滑塊或撥號控件而不是數字輸入類型之類的文本輸入框來表示。 因為這種小部件不精確，除非控件的確切值不重要，否則通常不應使用它。
list : 包含可選預定義選項的 <datalist> 元素的 id
max : 最大允許值
min : 最小允許值
step : 步進間隔，用於用戶界面和驗證目的
<textarea>
HTML <textarea> 元素表示一個多行純文本編輯控件，當你希望用戶輸入一段相當長的、不限格式的文本，例如評論或反饋表單中的一段意見時，這很有用。
下面的例子展示了 <textarea> 的幾個特點：
為了提高可訪問性（accessibility），用於將 <textarea>與一個 <label> 關聯的 id 屬性。
name 屬性，用於設置隨表單一同提交到服務器的相關數據的名字。
rows 和 cols 屬性，用於聲明 <textarea> 的精確尺寸。這對於一致性非常有幫助，因為不同瀏覽器的默認值常常不一樣。
位於開始標籤和閉合標籤之間的默認內容。 <textarea> 不支持 value 屬性。
<textarea> 還可以使用 <input> 中的一些常見屬性，如autocomplete, autofocus, disabled, placeholder, readonly, 和 required。
部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/
如果您喜歡我的文章，請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)
回饋由 Likecoin 基金會出資，您只要註冊/登入帳號(fb、google帳號都可以註冊，不超過1分鐘)，按五次左鍵，可以贊助我的文章且完全不會花到錢！若願意成為讚賞公民那是十分感激。
支持創作，正向交流:)
留言
張貼留言