HTML04：iframe內聯框架和表單標籤
阿新 • • 發佈：2022-03-17
iframe內聯框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> </head> <body> <h1>iframe內聯框架</h1> <!--iframe內聯框架--> <!-- src：引用頁面路徑 frameborder：邊框寬度 width：寬度 height：高度 allowFullScreen：允許全屏 name：框架標識名，連結標籤可以根據target屬性在該框架內開啟連結 --> <iframe src="https://v.qq.com/txp/iframe/player.html?vid=g0014r3khdw" name="blog" frameborder="0" allowFullScreen="true" width="100%" height="300px"></iframe> <!--正常情況會開啟新的標籤頁，但是如果存在框架標識名，就可以在那個框架裡開啟--> <a href="https://www.yuankexue.cn" target="blog">點選跳轉</a> </body> </html>
表單標籤
輸入標籤
列表框標籤
文字域標籤
表單驗證
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> </head> <body> <a name="top"></a> <h1>表單標籤</h1> <h2>輸入標籤</h2> <h2>列表框標籤</h2> <h2>文字域標籤</h2> <h2>表單驗證</h2> <h3>登入</h3> <!--表單標籤--> <!-- method：get/post action：向何處傳送表單資料，可以是網站，也可以是一個請求處理地址 --> <form action="https://www.yuankexue.cn" method="get"> <!--輸入標籤--> <!-- type：輸入格式（文字text，密碼password，按鈕button，圖片按鈕image，單選框radio，多選框checkbox，檔案域file，滑塊range、搜尋search） name：表單元素的名稱 value：元素預設值（radio屬性必須要） placeholder：提示輸入資訊 required：不能為空 pattern：正則表示式 readonly：只讀 disabled：禁用 hidden：隱藏域 --> <p>名字：<input type="text" name="username" placeholder="請輸入使用者名稱" required></p> <p>密碼：<input type="password" name="password" placeholder="請輸入密碼" required></p> <!-- 單選框和多選框的name屬性必須一致，否則無法識別為一個組 checked：預設勾選哪個選項 --> <p>性別： <input type="radio" name="gender" value="man" checked>男 <input type="radio" name="gender" value="woman">女 </p> <p>感興趣的領域： <input type="checkbox" name="interest" value="Java" checked>Java <input type="checkbox" name="interest" value="Python">Python <input type="checkbox" name="interest" value="PHP">PHP </p> <p><input type="image" src="../萬葉.jpg" name="photo"></p> <p>簡歷： <input type="file" name="resume"> <input type="button" name="upload" value="上傳"> </p> <p>滑塊： <input type="range" name="bright" min="1" max="100"> </p> <p>搜尋： <input type="search" name="search" placeholder="請輸入要搜尋的內容"> </p> <!--表單驗證--> <!--郵箱驗證--> <p>郵箱： <input type="email" name="email" placeholder="請輸入QQ郵箱"> </p> <!--網址驗證--> <p>網址： <input type="url" name="url" placeholder="請輸入https網址"> </p> <!--數字驗證--> <p>年齡： <input type="number" name="age" min="1" max="100" step="1"> </p> <!--列表框標籤--> <!-- name：列表名稱 option：子選項 selected：預設顯示哪一個選項 --> <p>國籍： <select name="國籍"> <option value="country">法國</option> <option value="country" selected>中國</option> <option value="country">俄羅斯</option> </select> </p> <!--文字域標籤--> <!-- name：文字域名稱 cols：文字域列數 rows：文字域行數 --> <p>評論： <textarea name="comment" cols="30" rows="10" placeholder="請輸入評論"></textarea> </p> <p> <input type="submit" name="login" value="登入"> <input type="reset" name="clear" value="清空"> </p> <!--增強滑鼠可用性--> <!-- 1、在input標籤中加上id 2、讓label標籤的for屬性等於該id，就可以實現點選label的文字，自動選中input輸入框 --> <p> <label for="mark">點選自動選框：</label> <input type="text" name="name" id="mark"> </p> <a href="#top">回到頂部</a> </form> </body> </html>