天天看點

HTML5學習筆記--Form

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無标題文檔</title>
</head>
<body>
<header><!--定義頁眉-->
    <hgroup><!--定義文檔中的标題組-->
        <h1>HTML5</h1>
        <h2>HTML4.01</h2>
        <h3>XHTML1.0</h3>
    </hgroup>
    <nav><!--定義主要的導航區域,對于側邊欄則不大适用-->
        <ul>
            <li>get waht</li>
            <li>get waht</li>
            <li>get waht</li>
        </ul>
    </nav>
</header>

<p contenteditable="true">aaa</p><!--可編輯性-->

<label for="input" >内容</label>
<input type="text" id="input" spellcheck="true" hidden="hidden"><!--斜體-->

<article><!--定義獨立闆塊,容器元素,可嵌套(類似div)-->
    <header>題目</header>
        <p>文章内容</p>
        <article>
            <header>
                <h3>評論者:訪客甲</h3>
            </header>
            <p>so nice!</p>
        </article>
        <article>
            <header>
                <h3>評論者:訪客乙</h3>
            </header>
            <p>what a waste!</p>
        </article>
        <aside>附屬資訊
            <b>bold粗體</b>
            <i>italic斜體</i>
            <u>underline下劃線</u>
            <code>定義計算機代碼,有種CData節的感覺,安全性增高</code>
            <pre>定義多行計算機代碼 var result=0</pre><!--定義預格式化的文本-->
            <q>quote定義引用文本,自帶雙引号 
                <cite>——引用文本,通常為書籍或者雜志的标題</cite>
                <p><!--datetime:表示具體的時間戳-->
                   <!--pubdate:是否為特定的文檔釋出标簽-->
                    釋出時間<time datetime="2015-03-15"  pubdate="pubdate">2015年3月15日</time>
                </p>
            </q>
            <blockquote>标記長引用文本,相當于q的更新版本</blockquote>
        </aside><!--定義article的附屬資訊-->
    <footer>作者</footer>
</article>

<section><!--定義文檔組成内容,與父标簽從屬關系,可自己嵌套或與article嵌套-->
    <h1>HTML5</h1>
    <article>
        <p>artile</p>
        <section>
            <em>so?</em>
        </section>
    </article>
</section>

<!--method:get通過URL傳遞(盡量少用,URL長度短于2KB),post通過背景直接傳遞,适用于資料量較大、安全性要求較高-->
<!--action:設定伺服器接收和處理表單資料的URL-->
<!--enctype:發送伺服器之前進行編碼的編碼方式,可選,盡在post時有效(這裡是無效的)-->
<form action="#" method="get" enctype="multipart/form-data" accept="image/gif,image/jpg" accept-charset="iso-8859-1" target="_parent" novalidate autocomplete="off/on"><!--accept:指定通過檔案上傳送出的檔案類型-->
<!--指定伺服器處理表單資料所接受的字元集,可選-->
<!--novalidate:是否啟用表單驗證功能,屬性為布爾值-->
    <p>
        姓名:
        <input formaction="#" type="text" formenctype="multipart/form-data" name="usrName"><!--formaction:任何輸入控件都可以設定,讓不同的表單資料傳輸給不同的伺服器--><!--formenctype:任何輸入控件都可以設定,為不同的表單資料指定編碼格式,對于檔案上傳輸入型必須選擇m/f以使用二進制編碼确定能連續傳送到伺服器(其餘一般用a/x)-->
    </p>
    <lable><!--設定輸入型控件的說明資訊,點選觸發控件-->
        <input id="usrMess">

        </input>
    </lable>
    <input type="submit"></form>
    <button type="button" disabled="false" autofocus form="相應表單的ID"><!--formmethod,formenctype,formtarget,formnovalidata-->
        <img src="" alt="">
    </button>
</form>

<form action="#" method="post">
        <fieldset><!--在控件周圍建立邊框表明控件是相關的-->
            <legend><em>必填項</em></legend><!--為表單控件組制定一個名稱,必須作為fieldset的第一個元素-->
            <label>姓名
                <input type="text" name="name">
            </label>
        </fieldset>
        <fieldset>
            <legend><em>選填項</em></legend>
            <label>身高:
                <select name="height" multiple="multiple" disabled="true" data- form="相應表單的ID" autofocus><!--size屬性不再支援。--><!--data:定義使用外部資料--><!--multiple:是否一次選擇多項-->
                    <option value="100">under 100cm</option>
                    <option value="100">above 100cm</option>
                </select>
            </label>
            <label>職位:
                <select>
                    <optgroup label="學生" disabled"disable">
                        <option value="大學生">大學生</option>
                        <option value="研究所學生">研究所學生</option>
                    </optgroup>
                    <optgroup label="">
                        <option>職業的</option>
                        <option value="兼職的"></option>
                    </optgroup>
                </select>
            </label>
        </fieldset>
</form>

<form action="#" method="post">
    <label>
            <input type="text" list="remined" name="school">
        </label>
        <datalist id="remined"><!--輸入選項-->
            <option value="html5是什麼" label="top1"/>
            <option value="html5"></option>
            <option value="make">nake?</option>
        </datalist>
</form>

<form action="#" method="post">
    <label>
        安全強度:
        <keygen name="security"><!--規定用于表單的額密鑰對生成器字段-->
    </label>
    <input type="submit">
</form>

<form method="post" action="#" id="myform">
    <label>
        圖檔:
        <input type="file" name="pic" accept="image/gif,img/jpeg" formenctype="multipart/form-data"><!--input type="image":圖像式送出按鈕;"radio":定義單選按鈕;"checkbox":定義複選框;"submit""reset":送出重置-->
    </label>
</form>

<form method="post" action="#">
    <label>
        電子郵件:
        <input type="email" name="useEmail"/>
        <input type="submit">
    </label>
    <label>
        網址:
        <input type="url" name="usrUrl"/>
        <input type="submit">
        <!--"number":定義數字的輸入域,min定義允許輸入的最小值,step定義變化間隔;
            "range":滑動條數字輸入域;
            "search":定義搜尋域,result定義顯示搜尋結果的條數。
            "color":定義顔色選擇域;
            "date":定義日期選擇域;"time":定義時間輸入域;"month";"week";"dateyime":date+time;"datatime-local":預設顯示本地時間;
            "telephone":定義電話号碼輸入域,但是沒有目前沒有浏覽器支援,還是得加正則比對。-->
    </label>
</form>

<!--form的屬性:
    placeholder:定義一個占位符,提示使用者輸入域期望輸入的值。
    required:定義必填項。
    pattern:定義正規表達式對輸入域進行驗證。
    multiple:定義輸入域可以選擇多個值。
    list:與datalist标簽組合定義輸入域的選項清單。
-->
<!--表單驗證:
    validity:自帶屬性,是否合法
    validity.valueMissing:是否為空
    typeMismatch:類型不合法
    tooLong:輸入超過規定長度
    stepMismatch:傳回使用者的輸入數字是否合法(符合step)
    rangeUnderflow:輸入的數字是否小于設定的最小值
    rangeOverflow:輸入的數字是否大于設定的最大值
    patternMismatch:輸入的内容是否滿足規定的驗證要求
    valid:傳回所有輸入的字段是否有效
    customError:傳回是否使用者自定義的錯誤
    preventDefault()關閉浏覽器的預設錯誤提示資訊,并且可以自定義錯誤資訊
-->

<textarea cols="10" rows="10" name="message" readonly disabled="flase" required inputmode>
<!--readonly:設定文本區域是否可讀--><!--required:是否必填-->
</textarea>

<footer>
    Copyrights! make<em>get</em><!--斜體-->
</footer><!--定義頁腳-->
</body>
</html>
           

繼續閱讀