表單

表單標籤

註冊和登入 目的：收集使用者資訊,能夠輸入內容

• input標籤

  • text

    • 文字輸入型別

    • <input type="text" name="username">
      

  • password

    • 密碼型別

    • <input type="password" name="password">
      

  • radio

    • 單選按鈕

    • <input type="radio" name="sex" value="boy">男
      <input type="radio" name="sex" value="girl">女
      

  • checkbox

    • 複選框

    • <input type="checkbox" name="course" value="HTML">HTML
      <input type="checkbox" name="course" value="CSS">CSS
      

  • button

    • 普通按鈕

    • <input type="button" value="點我">
      

  • submit

    • 提交按鈕

    • <input type="submit" value="提交">
      

  • reset

    • 重置按鈕

    • <input type="reset" value="清空">
       
      

  • file

    • 檔案上傳

    • <input type="file" name="file">
      

  • image

    • 影象形式的提交按鈕

    • <input type="image" src="submit.jpg" alt="submit">
      

  • hidden

    • 隱藏域

• select

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS">js</option>
        <option value="CSS">css</option>
    </select>
     
    

• textarea

  • 文字域

• label

  • <!-- label的for屬性要對應相應表單的id -->
            <input type="radio" name="shenfenzheng" value="zg" id="zg"><label for="zg">中國居民身份證</label>
            <input type="radio" name="shenfenzheng" value="ga" id="ga"><label for="ga">港澳臺居民身份證</label>
    

常用表單的屬性

action

• action屬性定義提交表單時執行的動作。通常表單會提交到web伺服器網頁，如果省略會被提交到當前頁面

method

• get

  • 從伺服器獲取資料, 資料量小， 不安全的
  • get是預設方法

• post

  • 向伺服器傳遞資料，相對安全
  • 資料量大

• checked

  • 應用到單選框，複選框

  • <input type="checkbox" checked>
    

• selected

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS" selected>js</option>
        <option value="CSS">css</option>
    </select>
    

• value

  • <input type="text" name="name" value="web前端">
    

• readonly

  • <input type="text" name="name" value="web前端" readonly>
    

• disabled

  • <input type="text" name="name" value="web前端" disabled>
    

• maxlength

  • <input type="text" name="name" maxlength="6">
    

• size

  • <select name="name" size="3">
    

• style="resize: none;"

  • <!-- resize: none 設定為不能改變尺寸 -->
    <textarea name="" cols="30" rows="10" style="resize: none;"></textarea>
    

文字溢位處理

• 單行文字溢位顯示省略號

  • white-space

    • normal 預設。空白會被瀏覽器忽略。
    • pre 空白會被瀏覽器保留。
    • nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 br 標籤為止。
    • pre-wrap 保留空白符序列，但是正常地進行換行。
    • pre-line 合併空白符序列，但是保留換行符。

  • text-overflow

    • clip 修剪文字。
    • ellipsis 顯示省略符號來代表被修剪的文字。
    • [string] 使用給定的字串來代表被修剪的文字。 目前只在Firefox下有效。

  • p {
        width:200px;	/*限定盒子的寬度*/
        overflow:hidden;	/*給元素設定溢位隱藏屬性*/
        text-overflow: ellipsis;	/*文字溢位顯示省略號*/
        white-space:nowrap; /* 文字不換行 */
    }
    

• 多行文字溢位顯示省略號

  • 利用WebKit的CSS擴充套件屬性（只有-webkit-核心才有作用）

    • p{
          width:200px;	/*限定盒子的寬度*/
          overflow: hidden; /*給元素設定溢位隱藏屬性*/
          text-overflow: ellipsis; /*文字溢位顯示省略號*/
          display: -webkit-box; /*將物件作為彈性伸縮盒子模型顯示*/
          -webkit-line-clamp: 2;/*用來限制在一個塊元素顯示的文字的行數，這是一個不規範的屬性，它沒有出現在CSS規範草案中。*/
          -webkit-box-orient: vertical;/*設定或檢索伸縮盒物件的子元素的排列方式*/
      }