iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

網頁開發(html.css)系列 第 7

Day7:網頁開發學習之路-表單製作(二)

  • 分享至 

  • xImage
  •  

1.<textarea> 標籤

表單裡的<textarea> 標籤可以用來輸入多行文字
當表單內容需要填寫較多的文字,ex:意見調查、建議事項…,就可以使用這個標籤
<textarea> 標籤上有這些屬性 (attributes):
name: 聲明欄位名稱
rows: 設定輸入框的高度是幾行文字 (lines),預設是 2
cols: 設定輸入框的寬度是多少文字 (characters),預設是 20
maxlength: 限定輸入的文字長度上限是幾個字
minlength: 限定輸入的文字長度最少是幾個字
placeholder: 輸入欄位中的提示訊息
disabled: 將欄位設定為禁用的狀態,是一個布林 (boolean) 屬性
readonly: 將欄位設定為唯讀不可編輯的狀態,是一個布林 (boolean) 屬性
required: 將欄位設定為必填,是一個布林 (boolean) 屬性

以下是設定高度是10,寬度是40,限定輸入的文字長度上限是500字
欄位中的提示訊息為"請輸入您的建議"

<textarea placeholder="請輸入您的建議" rows="10" cols="40" maxlength="500"></textarea>

textarea

2.<select> 標籤

<select> 用來建立下拉式選單 (dropdown menu),讓使用者可以從一堆選項中選擇出一個或多個選項。
<select> 標籤上有這些屬性

  • multiple 用來設定該選單中的選項可以被多選。
  • size 用來指定一次讓使用者看到幾個選項,預設值是 1
    但如果有設定 multiple 時,預設值則是 4。

在 select 裡面用 <option> 標籤來建立個別選項,選項內容放在 <option></option> 標籤裡面。

<select name="study"> 
    <option name="">請選擇你最想學的項目</option>
    <option name="html">HTML</option>
    <option name="css">CSS</option>
    <option name="javascript">JAVASCRIPT</option>
    <option name="php">PHP</option>
    <option name="node">Node.js</option>
</select>

select
select

3.<optgroup> 選項分區 (option group)

<optgroup>可以用來將同樣性質的選項分做一區一區的來顯示,而在 上有一個 label 屬性是用來設定該分區的名稱

<select name="study" >
  <optgroup label="程式語言">
    <option>python</option>
    <option>R</option>
    <option>Java</option>
  </optgroup>
  <optgroup label="網頁設計 ">
    <option>HTML</option>
    <option>CSS</option>
    <option>JAVASCRIPT</option>
  </optgroup>
</select>

select
select


上一篇
Day6:網頁開發學習之路-表單製作(一)
下一篇
Day8:網頁開發學習之路-div與span(一)
系列文
網頁開發(html.css)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言