iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
1
自我挑戰組

從零開始的基礎網站開發系列 第 6

day5 - 表單的介紹與meta網頁設定

正文開始:
在這大數據的時代當中表單的存在將是無法替代的一部份,表單有助於去分析了解一個人的行為和思考方式,話不多說,就讓我們進入html的表單吧。

 <body>
    <form action="URL" method="get/post">
    </form>
 <body>

form先向瀏覽器宣告我們要建立表單,透過action傳遞到需要接收資料的地方,也就是網站後台(若有興趣可以先去接觸psp相關課程了解),method屬性會檢視我們對表單的變動,若是使用get參數那變動會直接加入在網址最後方,速度雖快但安全性低,而post則是會將值透過http標頭傳送,安全性較高只是需要多經過http協定,method屬性默認為get。

 <body>
    <form action="URL" method=get>
       <label for="InputText">文字輸入框
       <input id="InputText" type="text" name="one" />
       </label>
    </form>
 </body>

id為所有標籤都具有的屬性,它提供了一個去識別標籤的方式,我們可以透過屬性偽標籤取名,相似的屬性為class,id為表單的身分證,具有唯一性,而class並不具有唯一性,適當的使用這兩個屬性會提高網頁後台的可讀性。
label標籤內必須加入for屬性,for屬性內的值將會填入所需掛鉤的表單id,當使用者點選到此標籤時將會自動聚焦到所掛勾的表單,所有表單應加入此屬性以方便使用者填寫表單,以上面代碼為例子:當使用者點選"文字輸入框"這五個字時將會自動聚焦到InputText此表單。
input標籤為所有表單的基礎,透過後面的type屬性告知瀏覽器所使用的控制項,text參數代表此表單為文字輸入框。
name屬性註明了此標籤的名稱,將會和表單內容一起傳送到後台。

 <input type="password" />
 <input type="file" value="upload" />
 <input type="submit" value="submit" />
 <input type="image" src="URL" />
 <input type="date" />
 <input type="email" />
 <input type="search">

password為一特別的文字輸入框,它提供了密碼遮罩,將你輸入的內容更改成預設的*字號
file提供了一個檔案上傳按鈕,value屬性的內容將會顯示在按鈕當中
submit為送出按鈕,它會將表單內容傳送到服務器中
image一樣為送出按鈕,但你可以透過src來將選定的照片當作按鈕
date提供了一個日期輸入器
email會檢查使用者所輸入的內容是否為有效的email格式
search將會透過js來對網頁內容進行搜索

 <input type="radio" name="RadioButton" value="one" checked="checked" />one
 <input type="radio" name="RadioButton" value="two" />two
 <input type="radio" name="RadioButton" value="three" />three

radio提供了一組單選按鈕,透過相同的name分群,其後的文字將會顯示在按鈕旁,checked屬性會設定預設此組單選鈕的預設值,表單送出後只會得到所選value的值

 <input type="checkbox" name="CheckboxButton" value="one" checked="checked" />one
 <input type="checkbox" name="CheckboxButton" value="two" />two
 <input type="checkbox" name="CheckboxButton" value="three" checked="checked" />three
 <input type="checkbox" name="CheckboxButton" value="four" checked="checked" />four

checkbox為勾選框,其運作跟單選紐類似,只是其能選擇的選項為複數

以上為常見input標籤的各種型態,除了input以外還有其他標籤一樣為表單控制項

 <textarea>hey guys</textarea>

textarea為一文字區塊,其標籤內的文字將會出現在文字區塊當中

 <select>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
 </select>

select提供了一個下拉式清單,通過option標籤建立選項,我們可以進行一蝦修改讓其支援多重選擇

 <select multiple="multiple">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
 </select>

增加了multiple屬性會使夏拉式清單可以進行多重選擇,在使用前建議查詢瀏覽器是否支援

 <button><img src="URL" alt="">button</button>

button會建立一個可以點選的按鈕,我們可以在其中建立一img標籤來增加影像,達成影像和文字的結合

表單內容到此告一段落,接下來是我們在第二天提到過的meta,它提供的是有關於網頁本身的設定,除了字元編碼我們常用到地方還有很多

 <head>
    <meta name="description" content="hello" />
    <meta name="keywords" content="one, two, three" />
    <meta name="robots" content="nofollow">
    <meta http-equiv="author" content="qw050123">
    <meta http-equiv="pragma" content=" no-cache">
 </head>

此處的name是用來指定所需要設定的特性,透過cintent來進行描述
description為網頁介紹
keyword為提供給搜索引擎的關鍵字
robots給予一個是否會被搜索引擎搜尋到的選擇
http-equiv="author"為網頁作者
http-equiv="prama"為是否讓他人建立快取以便下次進入

html的內容到此告一段落,明天會開始學習CSS的相關知識,由於CSS是一門龐大的課程因此不會介紹的過於詳細,如有問題歡迎私信討論。


上一篇
day4 - 多媒體的使用
下一篇
day6 - 元素編排與CSS基礎
系列文
從零開始的基礎網站開發29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言