iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Modern Web

HTML 與 CSS 學習筆記系列 第 23

Day23 - HTML 與 CSS (7) - Form 表單

Form 表單

  • <input>:說明 type 的單選與多選
    • radio:單選
      • 同一群要定義 namevalue 回傳值
      • 描述可用 labelfor="id"
      • 若要設定預勾選項,checked
    • checkbox:多選
      • 同一群要定義 namevalue 回傳值
      • 幾選幾,要搭配 JS
<h2>你的性別</h2>
<input type="radio" name="sex" value="1" id="sex1"><label for="sex1">男</label>
<input type="radio" name="sex" value="2" id="sex2" checked><label for="sex2">女</label>

<h2>你的興趣</h2>
<input type="checkbox" name="hobby" value="1" id="hobby1"><label for="hobby1">讀書</label>
<input type="checkbox" name="hobby" value="2" id="hobby2"><label for="hobby2">看電影</label>
<input type="checkbox" name="hobby" value="3" id="hobby3"><label for="hobby3">運動</label>

  • <select>:下拉選單,name 設定在這
    • <option>:內容選項,value 設定在這
    • 設定預設選項,selected
  • <textarea>:多行輸入
<h2>年份</h2>
<label for="year">年份</label>
<select id="year" name="year">
    <option value="2020" selected>2020</option>
    <option value="2021">2021</option>
    <option value="2023">2022</option>
</select>
<br>
<h2>建議</h2>
<textarea name="content" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="送出">
<br>

Form 的 CSS 樣式

  • border:外框
  • color:字型的顏色
  • border-radius:邊框圓角
  • background-color:背景色
  • padding:留白
  • font-size:字型大小
  • width:區塊的寬度
  • cursor:滑鼠座標的樣式
  • :hover:滑鼠移動過去的樣式
input {
    border: 3px solid red;
    color: white;
    border-radius: 5px;
    background-color: #000;
    padding: 5px 10px;
    font-size: 16px;
    width: 200px;
}

.btn {
    background: green;
    color: #fff;
    border: 1px solid red;
    border-radius: 5px;
    padding: 10px 30px;
    cursor: pointer;
}

.btn:hover {
    background-color: #000;
}

參考資料

次回

再回到說明 CSS


上一篇
Day22 - HTML 與 CSS (6) - Form 表單
下一篇
Day24 - CSS (5) - 圓弧、陰影
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言