【HTML】disabled

説明

disabled是input相關屬性,可以讓input的內容無法編輯、修改。

  • 若text input裡面有文字(value內容),則使用者無法修改
  • 若radio button / checkbox預設為勾選,則使用者無法取消勾選
  • 若radio button / checkbox預設為不勾選,則使用者無法勾選他

範例

text

<input type="text" value="fixed text" disabled />

radio button

<input name="rd-dis" type="radio"checked disabled/>
<label>radio one</label>
<input name="rd-dis" type="radio" disabled/>
<label>radio two</label>




checkbox

<input type="checkbox" checked disabled/>
<label>checkbox one</label>
<input type="checkbox" disabled/>
<label>checkbox two</label>




select

<select disabled>
 <option>apple</option>
 <option>orange</option>
 <option>banana</option>
</select>

 

【HTML】ruby tag 注音表記

説明

顯示國字的注音(或是日文的假名)

範例

基本用法

  • 文字主體ーrb tag (ruby body)
  • 注音標示ーrt tag (ruby text)
ruby
 rb 木霊 //文字主體
 rt こだま //注音標示

Display

木霊こだま

跨瀏覽器用法

有瀏覽器無法讀取ruby tag時,可以使用以下方法解決

  • rp tag (ruby parentheses)包覆rt tag
ruby
 rb 木霊
 rp (
 rt こだま
 rp )

Display

木霊(こだま)

dataset

dataset是一個方便取用元素屬性的規範
基本上元素屬性的命名是任意,但在dataset的規範下,會命名成以data-開頭的名稱,例如

#div(data-color="green" data-size="20")

如此一來,可以用強大的dataset物件快速取得屬性值

div.dataset.color; //'green'

div.dataset.size; //'20'

針對不能用dataset的瀏覽器(例如很舊的IE),就只能使用傳統的getAttribute()

div.getAttribute('data-color'); //'green'

div.getAttribute('data-size'); //'20'