form表單那點事兒(上) 基礎篇

時間 2019-12-06

標籤 form 表單那點事兒基礎欄目 HTML 简体版

原文原文鏈接

作爲html中最爲常見，應用最普遍的標籤之一，form常伴隨前端左右。瞭解更深，用的更順。css

表單屬性

這個表單展現了form表單經常使用的屬性html

屬性名	屬性值	描述
action	一個url地址	指定表單提交到的地址
method	`GET` , `POST`	表單將以此種方法提交到服務器
target	* `_self` 當前頁面 * `_blank` 每次在新窗口打開 * `blank` 每次在同一個新窗口打開 * `_parent` 父級frame * `_top` 頂級frame * iframename 指定的iframe	表單提交後，收到回覆的頁面
name	-	一個html文檔中，每一個form的name應該是惟一的
enctype	* `application/x-www-form-urlencoded` 默認值 * `multipart/form-data` 上傳file用 * `text/plain` html5默認	以 `POST` 方式提交form時的MIME類型。文件上傳必須使用 `multipart/form-data`
autocomplete	`on` , `off`	是否自動完成表單字段
autocapitalize	* `none` 徹底禁用自動首字母大寫 * `sentences` 自動對每句話首字母大寫 * `words` 自動對每一個單詞首字母大寫 * `characters` 自動大寫全部的字母	iOS 專用屬性，表單中文本域英文大小寫
accept-charset	字符編碼格式( `utf-8` , `gb-2312` 等)	將會以此種編碼格式提交表單到服務器，默認值是UNKONWN，即html文檔所採用的編碼格式。
novalidate	`true` , `false`	是否啓用表單校驗

下面舉例的表單將會以 post 方式將input的值以 utf-8 編碼格式提交到 /login 接口，並會打開一個新頁面顯示返回結果，因爲 target="blank" ，因此就算提交屢次該表單，都只會繼續刷新以前打開的窗口。前端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <form action="/login" method="post" target="blank" >
    <input type="text" name='username'>
    <button>提交</button>
  </form>
</body>
</html>

表單元素

常見的表單元素包括 input , select , textarea , button , progress 等，這些元素都有一些本身的屬性html5

屬性名	屬性值	描述
必須
type	* `text` 單行文本框 * `raido` 單選框 * `checkbox` 多選框 * `tel` 電話號碼輸入框 * `range` 滑塊取值框 ... ... 更多	指定input標籤展現的樣式，忽略type屬性將默認使用 `text`
name	字符串	form提交時，該字段的key，忽略value屬性的元素將不會被提交
狀態
checked	任意值或忽略該屬性	有此屬性的radio和checkbox元素將被選中，同一name多個元素具備此屬性的，提交時取最後一個值
selected	任意值或忽略該屬性	有此屬性的option元素將被選中，同一name多個元素具備此屬性的，提交時取最後一個值
readonly	任意值或忽略該屬性	具備該屬性的表單元素將不可輸入或改變狀態，除非用JavaScript操做
disabled	任意值或忽略該屬性	除擁有readonly的特徵外，表單提交時，將忽略此字段
限制
form	表單id	該元素將做爲指定id表單字段被提交。用於 `button` 或 `input type='submit'` 元素時，將提交指定id的表單示例代碼
accept	* `image/` 只能上傳圖片 `video/*` 只能上傳視頻	`input type='file'` 使用的屬性，是一個MIME類型的值，或文件後綴名。示例代碼
multiple	任意值或忽略該屬性	`input type='file'` 或 `select` 或應用了 `datalist` 的表單元素才能應用該屬性示例代碼
maxlength	正整數或0	文本域可輸入字符的長度，浮點數將會向下取整，負數將被忽略，JavaScript能夠繞過這一限制
required	任意值或忽略該屬性	該表單字段是否須要被驗證
pattern	一個正則表達式	`\d{4,6}` 形式的正則表達式，做爲required校驗規則
autocomplete	`on` , `off`	同form的autocomplete屬性，在表單元素上應用，優先級將高於form上指定的
autofocus	任意值或忽略該屬性	頁面加載時，該元素自動聚焦，應用於多個表單元素時，聚焦到第一個
展現
placeholder	字符串	在元素沒有value時，用於佔位顯示
value	字符串或數值	input 或 progress 展現的值,其中： * checkbox和radio的默認值是 'on' * range和progress的默認值是 0 * progress的是0的時候會播放循環動畫示例代碼

注意：如下示例部分來自 w3.orgcss3

form示例web

點擊預覽按鈕，將會把 username1 的值提交到 /preview，
點擊發布按鈕，將會把 username 的值提交給 /publish正則表達式

<form action="/preview" name='preview' id='preview'></form>

<form action="/publish" name='publish' id='publish'>
  <input type="text" name='username' value='1'>
  <input type="text" form='preview' name='username1' value='2'>
  <button form='preview'>預覽</button>
  <button>發佈</button>
</form>

accept示例api

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

multiple示例瀏覽器

datalist 須要鍵入 ',' 方可多選(需瀏覽器支持)服務器

<label>Cc: <input type=email multiple name=cc list=contacts></label>
<datalist id="contacts">
 <option value="hedral@damowmow.com">
 <option value="pillar@example.com">
 <option value="astrophy@cute.example">
 <option value="astronomy@science.example.org">
</datalist>

select 須要一直按下ctrl鍵纔可多選

<select name='number' multiple>
  <option value="CN">中國</option>
  <option value="US">美國</option>
  <option value="UK">英國</option>
</select>

input 直接框選多文件便可

<input type="file" multiple>

value示例

<progress value='70' max='100'></progress>
<input type="range" value='40' max='100'>
<input type="text" value='hello world'>

常識

下面是對於上面表格的一些總結，也加入了一些新的知識點

沒有 name 和有 disable 的字段不會被提交
同一個表單中，相同name的字段值會發生覆蓋，radio 和 checkbox 除外
在低版本瀏覽器中，name能夠做爲id使用
忽略或使用瀏覽器不支持的 type 會轉爲 type=text
低版本瀏覽器不支持動態改變 type
點擊 button 會默認提交表單
低版本瀏覽器須要指定 button 的 type=submit 纔會提交表單
文本域的光標顏色由字體顏色決定
form表單不能互相嵌套
表單元素能夠不在表單的html結構內 示例代碼
在表單最後一個input元素中敲回車，會觸發表單提交

模擬外觀

有一千種瀏覽器，就有一千種表單元素外觀。在之前，要想改變表單元素外觀，須要經過其餘標籤來模擬。
而在現代瀏覽器上，經過css3的appearance屬性( 兼容狀況 )指定元素的渲染風格，再結合:after,:before僞元素，能夠作出很酷炫的表單元素外觀。

做爲可替換元素，input標籤沒法使用僞元素。固然這只是W3標準。如下點到名的表單元素，仍是能夠照常使用:after,:before的: input type='radio' , input type='checkbox' , input type='file' , input type='range' , button , progress。

appearance是css3的標準屬性，面對現實，不少時候仍是須要加上-webkit- ，-moz- 前綴，舉一個把checkbox作成開關的例子：不出意外，長成這樣 ,

<style>
    input[type='checkbox'] {
        -webkit-appearance: none;
        padding: 9px;
        border-radius: 50px;
        display: inline-block;
        position: relative;
        outline: 0;
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
        width: 70px;
        height: 33px;
    }
    
    input[type='checkbox']:before,
    input[type='checkbox']:after {
        position: absolute;
        content: '';
        border-radius: 100px;
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
    }
    
    input[type='checkbox']:before {
        background: white;
        top: 1px;
        left: 1px;
        z-index: 2;
        width: 31px;
        height: 31px;
        box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type='checkbox']:after {
        content: 'OFF';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
        line-height: 34px;
        font-size: 14px;
        background: #eee;
        color: #ccc;
        text-indent: 35px;
        box-sizing: border-box;
        box-shadow: 0 0 1px #eee;
    }
    
    input[type='checkbox']:checked:before {
        left: 37px;
    }
    
    input[type='checkbox']:checked:after {
        content: 'ON';
        color: #fff;
        text-indent: 10px;
        background: #4cda60;
    }
</style>
<input type="checkbox">

示例代碼來自10個HTML5美化版複選框和單選框