天天av,丰满的继牳3中文字幕系列免费,狠狠躁夜夜躁av网站色

H5增強的表單

form元素及屬性

form元素

用來定義一個表單，是建立表單的基礎(chǔ)元素，（就類似定義表格的table）
表單的其他元素包含在form元素中，其主要子元素有：input/button/select......

form元素的屬性

action：指定表單的發(fā)送地址（服務器地址）
method:表單數(shù)據(jù)發(fā)送至服務器的方法，常用的有兩種：get/post

get和post提交的區(qū)別

get方法提交，數(shù)據(jù)會附在網(wǎng)址之后主動提交給服務器
post方法提交，數(shù)據(jù)不會附在網(wǎng)址后，會將數(shù)據(jù)打包發(fā)送給服務器，等候服務器來讀取數(shù)據(jù)進行處理

input元素及其屬性

input元素

用來設(shè)置表單中的內(nèi)容項，比如輸入內(nèi)容的文本框，按鈕等
不僅可以布置在表單中，也可以在表單之外的元素使用

input元素的屬性

1.  `type屬性`：指定輸入內(nèi)容的類型，默認為text:單行文本框

        默認為text 
        password：密碼狀態(tài)輸入
        submit:提交按鈕，點擊將數(shù)據(jù)發(fā)送至服務器
        reset:重置按鈕
        button:普通按鈕
        imge：圖片式提交按鈕
        hidden；隱藏字段
            該內(nèi)容不會顯示頁面上
            一般為網(wǎng)頁設(shè)計者設(shè)置的變量數(shù)據(jù)，提交時，隱藏內(nèi)容會提交到服務器
            關(guān)于hidden暫時只了解這么多，以后用到的時候再詳細說
        email:表示要輸入一個電子郵箱
        url:表示要輸入一個網(wǎng)址
        tel:表示輸入的內(nèi)容是一個電話號碼(不驗證，鍵盤是數(shù)字)
            這是HTML5新增的
            他會對輸入內(nèi)容進行驗證，在之前需要編寫大段的JS代碼來進行這項工作
            瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
        number:
            這是HTML5新增的
            可以配合input的max/min/step/value規(guī)定允許輸入的最大值/最小值/步長/默認值
            瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
        range(活動條)
            這是HTML5新增的；與number類型類似，也是表示一定范圍的數(shù)值輸入，但是以一個活動條的狀態(tài)顯示
            可以配合input的max/min/step/value規(guī)定的最大值/最小值/步長/默認值
            瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
        時間類
            這是HTML5新增的；
            包括datetime/datetime-local/date/month/week/time
            瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
        color
            這是HTML5新增的；
            可以建立一個顏色的選擇輸入框
            瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
        seacrch
            這是HTML5新增的；
            用于建立一個搜索框，用來供用戶輸入搜素的關(guān)鍵詞
            瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
        file
            用來創(chuàng)建一個文件選取的輸入框
            可通過accept屬性規(guī)定選取文件的類型，比如圖片/視頻
            multipe屬性可以設(shè)定一次允許選擇多個文件
        autofocus屬性：自動獲得焦點
        accesskey屬性：指定快捷鍵windows中，指定快捷鍵后，按Alt+“快捷鍵”,便會獲得焦點
        tabindex屬性：指定按Tab鍵時，項目間的移動順序
        autocomplet屬性： HTML5新增屬性屬性值為on/off,定義是否開啟瀏覽器自動記憶功能,默認開啟on

name屬性:輸入內(nèi)容的識別名稱，傳遞參數(shù)時候的參數(shù)名稱
value屬性:默認值
maxlength:輸入的最大字數(shù)
readonly屬性：只讀屬性，設(shè)置內(nèi)容不可變更，提交時會以前發(fā)送至服務器
disabled屬性：設(shè)置為不可用（不可操作）
placeholder屬性：設(shè)置默認值，當文本框獲得焦點時被清空，對text/url/tel/email//password/search有效
autocomplet屬性：屬性值為on/off,定義是否開啟瀏覽器自動記憶功能
autofocus屬性：自動獲得焦點
checkbox/復選框

用來創(chuàng)建一個復選框（可以多項選擇）

通過checked屬性可講某個選項設(shè)為默認的選取狀態(tài)，再次單擊取消選取
radio/單選框

用來創(chuàng)建一個單選框（可以多項選擇）

通過checked屬性可講某個選項設(shè)為默認的選取狀態(tài)，再次單擊取消選取

必須將同一組單選項設(shè)置一個相同的name屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="http://www.hao360.cn/" method="get"><br>
        <input type="hidden" value="測試" name="ceshi"><br>
        用戶名：<input type="text" name="user" name="user" value="請輸入用戶名" maxlength="11" autocomplet="off"><br>
         密碼： <input type="password" name="ps" name="password"><br>
        地址：<input type="text" readonly="readonly" name="address" value="xx街道"><br>
        提示：<input type="text" disabled="disabled" value="提示"><br>
        郵箱：<input type="email" name="email" required><br>
        網(wǎng)址：<input type="url" name="url" accesskey="n"><br>
        電話；<input typ="tel" name="tel"><br> 
        數(shù)量：<input type="number" value="2" min="2" max="6" step="2" name="num">
        進度：<input type="range" min="0" max="100" value="10"name="rang">
        時間：<input type="time"><br>
        日期：<input type="date"><br>
        周：<input type="week"><br>
        月：<input type="month"><br>
        本地時間：<input type="datetime-local"><br>
        UTC時間：<input type="datetime"><br>
        顏色選擇：<input type="color" name="color"><br>
        搜索框：<input type="search" placeholder="提示內(nèi)容" autofocus ><br>
        文件：<input type="file" accept="image/png" multiple="multiple">
        <h3> 復選框 </h3>
        <input type="checkbox" name="dx" value="1">aa
        <input type="checkbox" name="dx" value="2" checked="checked">bb
        <input type="checkbox" name="dx" value="3">cc
        <input type="checkbox" name="dx" value="4">dd
        <hr>
        <h3> 單選框 </h3>
        <input type="radio" name="rd" value="1">aa<br>
        <input type="radio" name="rd" value="2" checked="checked">bb<br>
        <input type="radio" name="rd" value="3">cc<br>
        <input type="submit" value="確定">
        <input type="reset" value="清除">
        <input type="button" value="普通按鈕">
        <input type="image" src="sc.png"> 
    </form>
</body>
</html>

input.png

select元素

用來建立一個下拉菜單選項列表
不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用
select只是定義一個下拉菜單列表，其具體列表項要通過option元素建立
option元素可以用來建立一個選項，即下拉列表的一個菜單項
optgroup元素用來對option元素進行組合分組
size用來定義列表中顯示的列表項
multiple屬性用來定義是否可以多選
可以添加disabled屬性和autofocus屬性

datalist元素

HTML5新增元素，用來建立一個選項列表
datalist元素的內(nèi)容不會直接顯示在網(wǎng)頁上，只是會在用戶輸入時作為候選項
通常與input元素配合使用(不太方便動態(tài)改變，)

HTML5新增表單屬性

form屬性:將表單外的內(nèi)容與表單進行關(guān)聯(lián)

novalidate屬性：設(shè)置數(shù)據(jù)提交時不進行驗證

enctype屬性：僅作了解規(guī)定在發(fā)送到服務器之前應該如何對表單數(shù)據(jù)進行編碼。通常情況下我們使用默認值即可

accept-charset屬性：僅作了解accept-charset 屬性規(guī)定服務器處理表單數(shù)據(jù)所接受的字符集。 accept-charset 屬性允許您指定一系列字符集，服務器必須支持這些字符集，從而得以正確解釋表單中的數(shù)據(jù)。通常情況下我們使用默認值即可此屬性的默認值是 "unknown"，表示表單的字符集與包含表單的文檔的字符集相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <form action="" id="xz">
        <select name="selelct" multiple="multiple">
            <optgroup>
                <option value="1">選我</option>
                <option value="2">選她</option>
                <option value="3">不選</option>
            </optgroup>
            <optgroup >
                <option value="1">選我</option>
                <option value="2">選她</option>
                <option value="3">不選</option>
            </optgroup>
        </select>
        <input type="submit">
    </form>
    <hr>
    <form>
        <input type="text" name="text" list="mydatalist">
        <datalist id="mydatalist">
            <option value="選我"></option>
            <option value="選她"></option>
            <option value="不選"></option>
        </datalist>
        <input type="submit">
    </form> 
    <form novalidate="novalidate">
        用戶名：<input type="text" name="user" form="xz">
        郵箱：<input type="email" name="email">
        <input type="submit">
    </form>
</body>
</html>

select_datalist.png

lable元素

用來為 input 元素定義標注（標記）,建立一個與之相關(guān)聯(lián)的標簽
for屬性，讓標簽與指定的input元素建立關(guān)聯(lián)
將input元素包含在label標簽中
可以通過accesskey建立快捷鍵

lable屬性

在option元素中可以設(shè)定比標簽內(nèi)容更優(yōu)先的選項
optgroup的分組名稱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="2" align="center" style="background:yellow;padding=10px">
        <tr>
            <td>
                <h3>你喜歡誰？</h3>
                <input type="checkbox" name="ck" value="我" id="a">
                <label for="a">我</label>
                <input type="checkbox" name="ck" value="你" id="b"><label for="b">你</label>
                <label><input type="checkbox" name="ck" value="他" id="c">他</label>
                <label>
                    <input type="checkbox" name="ck" value="木木" id="d">木木
                </label>
                <label>
                    <input type="checkbox" name="ck" value="屎蛋" id="e">屎蛋
                </label>
                <hr>
                <h3>你的性別？</h3>
                <input type="radio" name="rd" value="男" id="1">
                <label for="1">
                    男
                </label><br>
                <label>
                    <input type="radio" name="rd" value="女" id="2">女<br>
                </label>
                <label>
                    <input type="radio" name="rd" value="不告訴你" id="3">不告訴你<br>
                </label>
                
            </td>
            <td>
                <h3>你喜歡誰？</h3>
                <input type="checkbox" name="ck" value="我" id="a">我
                <input type="checkbox" name="ck" value="你" id="b">你
                <input type="checkbox" name="ck" value="他" id="c">他
                <input type="checkbox" name="ck" value="木木" id="d">木木
                <input type="checkbox" name="ck" value="屎蛋" id="e">屎蛋
                <hr>
                <h3>你的性別？</h3>
                <input type="radio" name="rd" value="男" id="1">男<br>
                <input type="radio" name="rd" value="女" id="2">女<br>
                <input type="radio" name="rd" value="不告訴你" id="3">不告訴你<br>
            </td>
        </tr>
    </table>

    <hr>
    <form action="">
        <h3>查看相關(guān)</h3>
        <input type="submit" value="搜索">
        <select>
            <optgroup label="人">
                <option value="你好">你好</option>
                <option value="我好">我好</option>
            </optgroup>
            <optgroup label="動物">
                <option value="豬好" label="動">豬好</option>
                <option value="狗好">狗好</option>
            </optgroup>
        </select>
    </form>
    
</body>
</html>

label.gif

textarea元素

用來建立多行輸入文本框
元素標簽中的內(nèi)容將一文本框默認值的形式呈現(xiàn)
不僅可以用在表單中，也可以在其他塊元素或內(nèi)聯(lián)元素中

textarea元素的屬性：

name/disabled/readonly/form/reauired/autofocus/placeholder屬性
rows屬性：設(shè)置多行文本的行數(shù)（高度）
cols屬性：設(shè)置多行文本的每行顯示的字數(shù)（寬度）

button元素

用來建立一個按鈕從功能上來說，與input元素建立的按鈕相同
button元素是雙標簽，其內(nèi)部可以配置圖片與文字，進行更復雜的樣式設(shè)計
不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用

button元素的屬性

type屬性：可以設(shè)置三個值 submit/reset/button與input元素設(shè)置的按鈕含義相同
name/vlue/disable屬性：與input的用法相同
autofocus屬性：設(shè)置按鈕自動獲得焦點。
form屬性：設(shè)定按鈕隸屬于哪一個或多個表單
formmethod屬性：設(shè)定表單的提交方式，將覆蓋原本的提交方式
formnovalidate屬性：設(shè)定表單將會覆蓋原本的novalidate屬性
fomaction屬性：指定表單數(shù)據(jù)發(fā)送對象，將覆蓋原來的action屬性設(shè)定
formenctype屬性;指定表單的數(shù)據(jù)發(fā)送類型，將覆蓋原本的enctype屬性設(shè)定
formtarget屬性：將覆蓋原本的target屬性設(shè)定
重要事項：如果在表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 button元素開始標簽與結(jié)束標簽之間的文本，而其他瀏覽器將提交 value 屬性的內(nèi)容。最好就是在表單中使用 input 元素來創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" id="myform">
        用戶名：<input type="text" size="30" name="user"><br><br>
        意見：<textarea rows="5" cols="30" placeholder="請輸入您的意見" name="yj"></textarea><br>
        <button type="submit" style="background:red;border-radius:10px"><img src="sc.png" width="12" >提交</button>
        <button type="reset">重置</button>
        <input type="submit" value="提交到地址1" formaction="http://www.baidu.com">
        <input type="reset">
    </form>
</body>
</html>

output元素：數(shù)據(jù)的輸出

output元素是HTML5新增的元素，用來設(shè)置不同數(shù)據(jù)的輸出
output元素的輸出內(nèi)容是由代碼控制的

output元素的屬性：

name屬性：定義對象的唯一名稱。（表單提交時使用）
form屬性：定義所屬的一個或多個表單。
for屬性：定義輸出域相關(guān)的一個或多個元素。

oninput表單事件：當用戶對元素數(shù)據(jù)的輸入時觸發(fā)

parseInt() 是一個javascript函數(shù)，它可以解析一個字符串，并返回一個整數(shù)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" id="num1" />
    +
    <input type="number" id="num2" />
    =
    <output name="num" for="num1 num2">

    </output>
  </form>
</body>
</html>

output.gif

progress元素

是HTML5中新增的元素，用來建立一個進度條
通常與JavaScript 一同使用，來顯示任務的進度。
使用時注意瀏覽器的支持情況：Internet Explorer 9 以及更早的版本不支持

progress元素的屬性：

max屬性：規(guī)定當前進度的最大值。
value屬性設(shè)定進度條當前默認顯示值
form屬性：規(guī)定進度條所屬的一個或多個表單。

meter元素

是HTML5中新增的元素，用來建立一個度量條,用來表示度量衡的評定
通常與JavaScript 一同使用，來顯示任務的進度。

meter元素的屬性：

value屬性設(shè)定進度條當前默認顯示值
max屬性：規(guī)定范圍的最大值，默認值為1.
min屬性：規(guī)定范圍的最小值，默認值為0.
low屬性：規(guī)定被視作低的標準。
high屬性：規(guī)定被視作高標準。
form屬性：規(guī)定所屬的一個或多個表單。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" id="myform">
    <progress max="10" value="3"></progress><br />
    <meter max="100" min="0"  value="60" high="80" low="30"></meter>
  </form>
</body>
</html>

progress.png

fieldset元素：可將表單內(nèi)的相關(guān)元素分組。

當一組表單元素放到fieldset標簽內(nèi)時，瀏覽器會以特殊方式來顯示它們，通常會有一個邊框。
沒有必需的或唯一的屬性。form/disabled屬性可用。

legend元素：為 fieldset 元素定義標題

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>
        用戶注冊
      </legend>
      賬號：<input type="text" name="user" /><br>
      密碼：<input type="password" name="password" /><br>
      <input type="submit" />
    </fieldset>
  </form>
</body>
</html>

fieldset.png

keygen元素

是HTML5中新增的元素，用來建立一個密鑰生成器
當提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務器。主要作用是提供一種用戶驗證身份的方法
使用時注意不同瀏覽器支持程度不同；目前Internet Explorer 和 Safari暫不支持

keygen元素元素的屬性：

name/form/autofocus/disabled
challenge屬性:將 keygen 的值設(shè)置為在提交時詢問。
keytype屬性：定義密鑰類型，如設(shè)置為rsa（一種密碼的算法），則生成 RSA 密鑰。

<body>
  <form action="" id="myform">
    賬號：<input type="text" name="account" />
    加密：<keygen name="mykey">
    <input type="submit" />
  </form>
</body>

keygen.png

pattern屬性

設(shè)定輸入類型的正則表達式

details元素

用于描述文檔或文檔某個部分的細節(jié)。
通常與summary元素配合使用，可以為 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details中的內(nèi)容。

details元素的屬性：

open屬性：規(guī)定在 HTML 頁面上 details 是可見的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <details open="open">
    <summary>
      點擊率
    </summary>
    <p>
      該文章目前的點擊率：6000
    </p>
    <ul>
      <li>
        8000以上：很火<meter max="10000" min="0" low="3000" high="8000" optimum="" value="9000"></meter>
      </li>
      <li>
        3000-8000以上：一般<meter max="10000" min="0" low="3000" high="8000" optimum="" value="4000"></meter>
      </li>
      <li>
        3000以下：人氣不高啊<meter max="10000" min="0" low="3000" high="8000" optimum="" value="1000"></meter>
      </li>
    </ul>
  </details>
</body>
</html>

details.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    form{background: pink;width: 400px;padding: 10px;margin-top: 150px;margin-left: 200px;}
    button{background: #7370d8; padding: 5px;border-radius: 5px}
    button:hover{padding: 7px;background: #2f4f4f;border-radius: 5px}
    input{padding: 5px;background: #f8f8f8}
    input:focus{background: #ffc0cb;padding: 5px}
  </style>
</head>
<body>
  <form action="">
    <fieldset>
      <legend>
        注冊用戶
      </legend>
      <p>
        <label for="user">
          賬號：
          </label>
        <input type="text" name="user" id="user" placeholder="賬號" required="required" />
      </p>
      <p>
        <label>
          密碼：<input type="password" name="password" id="password" placeholder="密碼" required="" />
        </label>
      </p>
      <p>
        <label>
          電話號碼：<input type="tel" name="phone" id="phone" placeholder="電話號碼" required="" />
        </label>
      </p>
      <p>
        <label>
          電子郵箱：<input type="email" name="email" id="email" placeholder="電子郵箱" required="" />
        </label>
      </p>
      <button>注冊</button>
    </fieldset>
  </form>
</body>
</html>

end.gif

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

3_H5增強表單

3_H5增強表單

H5增強的表單

form元素及屬性

input元素及其屬性

select元素

datalist元素

HTML5新增表單屬性

lable元素

lable屬性

textarea元素

textarea元素的屬性：

button元素

button元素的屬性

output元素：數(shù)據(jù)的輸出

output元素的屬性：

progress元素

progress元素的屬性：

meter元素

meter元素的屬性：

fieldset元素：可將表單內(nèi)的相關(guān)元素分組。

legend元素：為 fieldset 元素定義標題

keygen元素

keygen元素元素的屬性：

pattern屬性

details元素

details元素的屬性：

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

3_H5增強表單

H5增強的表單

form元素及屬性

input元素及其屬性

select元素

datalist元素

HTML5新增表單屬性

lable元素

lable屬性

textarea元素

textarea元素的屬性：

button元素

button元素的屬性

output元素：數(shù)據(jù)的輸出

output元素的屬性：

progress元素

progress元素的屬性：

meter元素

meter元素的屬性：

fieldset元素：可將表單內(nèi)的相關(guān)元素分組。

legend元素：為 fieldset 元素定義標題

keygen元素

keygen元素元素的屬性：

pattern屬性

details元素

details元素的屬性：

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频