iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
自我挑戰組

網頁排版個人學習筆記系列 第 2

常用HTML與CSS筆記- 表單類

表單元素

  • 表單生成首要
    -需先產生一個form,按鈕、元件都需要在裡面。再分別看客戶需要些甚麼資料下去寫表單元素
    -action是告訴html標籤你裡面的相關資訊,傳送到儲存資料的資料庫位置
<form action="#">按鈕、元件寫在裡面</form>
  • 標籤
<label for="">顯示文字</label>
  • 文字欄位
    -name中資料會顯示在網址上,提交表單後可從網址上的傳送值得知填的資訊
<input type="text" name="">
  • 按鈕 button
<!--寫法1-->
<button type="button">我式按鈕</button>

<!--寫法2-->
<input type="button" class="自訂 也可略" value="我是按鈕">
  • 按鈕送出:
    -value中的字會顯示在按鈕上
<input type="submit" value="送出">
<input type="radio" id="" name="" value="">
<lable for=""></lable>
  • Checkbox 方塊選單 範例
    Checkbox示意圖
    • 可重覆選取
    • name : 如果是相同性質的選項例如興趣, name 就可以設定相同的值。例如: name="interest"
    • value : 每個 checkbox 的 value 值皆不同,方便 PHP 等程式判別勾選了那些
    • 參考文章
<input type="checkbox" id="" name="" value="" >
<lable for=""></lable>
<select name="">
    <option value=""></option>
</select>
  • 多行文字欄位:範例
    -cols 字數,rows行;cols和rows可拿掉用css控制寬高即可; id可省略
    -要記得<textarea></textarea> 之間不可以有空白否則placeholder文字無法顯示 範例
<textarea name="" id="" cols="30" rows="10"></textarea>

表單內文字設定

PURE表單應用教學

  • placeholder用法 範例
    表單格內寫預設文字, 輸入資訊後預設文字會消失
    placeholder用法
  • label用法1 範例
    -於表格上方顯示表單標題,點選標題標籤label會直接跳到要填寫的表格內input,可直接填寫內容
    label用法
<form action="#">
    <label for="填入要對應的表單id">填要顯示的表單標題</label>
    <input id="填入與上方label內一樣的id" type="text" name="">
</form>
  • label用法2 範例
    -表單與標題呈上至下排列,input[type="text"] 設定display:block;變區塊元素
    label表單標題上至下

表單常設定的css屬性

  • type="text" borderborder-radiuscolor
  • 箭頭滑過去會變手型狀 type="button" cursor:pointer;
  • 有時因瀏覽器不同,會導致裂版或斷行問題
    |解決辦法|
    1. purecss.io 觀看css寫法 (為yahoo釋出的css框架,可解決網頁瀏覽器兼容器的問題)
    2. 進入purecss.io按"Get Started"做下載 (Buttons/Tables/Forms)建議這三個css可以看熟了解寫法
    3. 可依此寫法為基底下去做自己的版本

表單元素總整理

<form action="#">
    <label for="填入要對應的表單id">填要顯示的表單標題</label>  <!--標籤-->
    <input id="填入與上方label內一樣的id" type="text" name="">  <!--文字欄位-->   
    <input type="radio" name="" value="">  <!--單選選單-->
    <input type="checkbox" name="" value="">  <!--方塊選單-->
    <select name="">                <!--下拉式選單-->
        <option value=""></option>
    </select>
    <textarea name="" id="" cols="30" rows="10"></textarea>  <!--多行文字欄位-->
    <input type="submit" value="送出">   <!--按鈕送出-->
</form>

※ 關於更多表單的寫法可至PURE.CSS-Forms內瀏覽


上一篇
常用HTML與CSS整理-基礎
下一篇
HTML&CSS|使用css變更html標籤特性
系列文
網頁排版個人學習筆記30

尚未有邦友留言

立即登入留言