網頁上這個東西叫什麼？

『我們這邊就使用那個拉霸！』

前言

前幾天在公司開會的時候，因為 PM 覺得同事指著「下拉式選單」講「拉霸」很有趣，讓我想將它記錄下來。

對於沒有接觸網站開發或是寫過網頁的人，網站上一切的元件雖然都很熟悉，但都不知道他們的名字叫什麼，那個勾勾、那個圓圈、那個拉霸、藍色加底線、三個一排的按鈕、彈出來的框框等等，就像最熟悉的陌生人一樣。

溝通

之前曾經看過一篇文章——如何寫出一篇好懂的文章以利溝通？六大技巧分享提到

要了解一個領域的 Domain Knowledge（相關知識），這種名詞定義對於初學者來說可是相當重要，大概就像學習英文要先背單字一樣，了解名詞之後，對於一些模糊性的詞句也會初步的輪廓出現，最重要的是，與相關領域的人溝通時可以更加有效率。

因為之前也看過中國的朋友寫過这个控件叫什么，在 Web development 這個領域裡面其實也充滿了許多神秘元件別名或是代稱，在名詞沒有共識的時候溝通成本真的是非常高，為了自己的未來就覺得還是把這個方面的東西紀錄一下好了。

因為東西很多，應該會變成系列文，我們這次就從比較常見的開始吧！

連結 Link

大概是網頁上最常出現的東西，文字連結一般來說預設是藍色而且自帶底線，不過許多網站會因為整體風格或是畫面考量改成其他顏色，像是你現在閱讀的這裡連結就是長這樣→連結，圖片連結就是你滑鼠移到圖上面會變成手指頭，當然還有各式各樣的連結出現。

按鈕 Button

就是按鈕，但是可以玩的花招很多，像是按鈕的顏色、邊框、陰影、滑鼠移過去時的變化（:hover）、點擊時的變化（:active）等等，都可以讓你的按鈕變得五光十色。

  <input type="button" value="素顏按鈕">
  <input type="button" value="我白裡透紅" style="border: solid red 1px;">
  <input type="button" value="求陰影面積" style="box-shadow: 3px 3px 3px gray">
  <input type="button" value="Bootstrap" class="btn btn-success">
  <input type="button" value="我按不下去" class="btn btn-secondary" disabled>

在網頁上就會這樣呈現

下拉式選單 Select

就是本篇文章一開始說的拉霸，但他不會轉，通常會拿來放在單選。

  <select name="pickUpTimeSelect">
  　<option value="morning">上午時段 08:00 ~ 12:00</option>
  　<option value="afternoon">下午時段 13:00 ~ 17:00</option>
  　<option value="evening">晚上時段 18:00 ~ 22:00</option>
  </select>

在網頁上就會這樣呈現

　上午時段 08:00 ~ 12:00 　下午時段 13:00 ~ 17:00 　晚上時段 18:00 ~ 22:00

勾選選項 Checkbox

通常會使用在勾選多個選項的時候，像是興趣、專長、自助餐等等。

  <h4>請勾選你擁有的超能力</h4>
  <input type="checkbox" value="Invisible" name="Power"> 在黑夜中隱形
  <input type="checkbox" value="Bald" name="Power"> 馬上禿頭 
  <input type="checkbox" value="Fade" name="Power"> 褪色
  <input type="checkbox" value="Ageing" name="Power"> 增加老化速度
  <input type="checkbox" value="SuperReading" name="Power"> 讀自己的心

在網頁上就會這樣呈現

請勾選你擁有的超能力

在黑夜中隱形
馬上禿頭
褪色
增加老化速度
讀自己的心

單選選項 Radiobox

通常會使用在單選的情況，不過我想應該很多人會有疑問，為什麼單選叫做 Radio？

根據維基百科的說法：

Radio buttons were named after the physical buttons used on older radios to select preset stations – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the “pushed in” position

老式的車用收音機通常有一排按鍵，同一個時間點只有一個鍵會是『按下』的狀態，每當按下其中一個鍵時原本按下的鍵就會跳起，所以把它對應到這個網頁元件上，其實命名的還真的不錯。

  <h4>請問你是哪一隊的球迷</h4>
  <input type="radio" name="team" value="SF"> 舊金山巨人
  <input type="radio" name="team" value="Lotte"> 樂天巨人
  <input type="radio" name="team" value="Yomiuri"> 讀賣巨人
  <input type="radio" name="team" value="Mobil"> 美孚巨人

在網頁上就會這樣呈現

請問你是哪一隊的球迷

舊金山巨人 樂天巨人 讀賣巨人 美孚巨人

輸入框 Input text

輸入框，就是用來寫東西的，通常會出現在搜尋、表單以及任何要輸入文字的地方。

  你的姓名：<input type="text" value="林小明"><br>
  你的電話：<input type="tel" placeholder="手機會彈出數字鍵盤">
  你的密碼：<input type="password" placeholder="看不到">

在網頁上就會這樣呈現

你的姓名：
你的電話：
你的密碼：

文字欄位 Textarea

文字欄位，相較於輸入匡，文字欄位允許輸入多行的文字，欄位高度不夠時會出現 scrollbar，通常會出現在臉書的發布狀態、部落格後台等等。順帶一提，雖然 testarea 可以設定預設的高度，但其實右下角都有個三角形可以拖曳自行改變喔。

  <textarea rows="3" cols="60">
    哭啊 喊啊 叫你媽媽帶你去買玩具啊
    快 快拿到學校炫耀吧 孩子 交點朋友吧
    更多更詳盡歌詞 在 ※ Moj_m.com　魔＿歌詞網 
    哎呀呀 你看你手上拿的是什麼啊
    那東西我們早就不屑啦 哈哈哈
  </textarea>

在網頁上就會這樣呈現

哭啊 喊啊 叫你媽媽帶你去買玩具啊 快 快拿到學校炫耀吧 孩子 交點朋友吧 更多更詳盡歌詞 在 ※ Moj_m.com　魔＿歌詞網 哎呀呀 你看你手上拿的是什麼啊 那東西我們早就不屑啦 哈哈哈

最後

這次就先介紹應該是比較常見的七個，其他的之後應該會慢慢補充吧，謝謝大家！

話說這篇文章從去年七月起草到現在發布總共花了半年…我的產文能量真的很低。