HTML5基礎 下

<header>
    <h2>網頁頭部</h2>
</header>
<section>
    <h2>網頁主體</h2>
</section>
<footer>
    <h2>網頁腳步</h2>
</footer>

iframe行內框架

src:參考頁面地址 name：框架標識名

<iframe src="path" name="mainFrame"></iframe>

表單語法

method:規定如何發送表單資料 常用值：get | post

action:表示向何處發送表單資料

<form method="post" action="result.html">
  <p>名字：<input name="name"type="text"></p>
  <p>密碼：<input name="pass"type="password">
  <p>
     <input type="submit" name="Button"value="提交"/>
     <input type="reset" name="Reset"value="重填"/>
  </p>
</form>

表單元素格式

<!--表單form
action: 表單提交的位置，可以是網站，也可以是一個請求處理地址
method:post ,get提交方式
get方式提交：我們可以在URL中看到問提交的資訊，不安全，高效
post：比較安全，傳輸大檔案
-->
<form action="我的第一個網頁.html"method="post">
<!--    文本輸入框 input type="text"
         value=“哈哈哈” 默認初始值
         maxlength=“8” 最長能寫幾個字符
         size="30" 文本框的長度

-->
    <p>名字：<input type="text"name="username"></p>
<!--    密碼框：input type=“password”-->
    <p>密碼：<input type="password"name="pwd"></p>

<!--    單選框標簽
    input type="radio"
    value:單選框的值
    name：表示組
    checked 默認選中
-->
    <p>性別
        <input type="radio"value="boy" name="sex">男
        <input type="radio"value="girl" name="sex">女
    </p>
    <p>愛好：
        <input type="checkbox" value="sleep"name="hobby">睡覺
        <input type="checkbox" value="girl"name="hobby">女
        <input type="checkbox" value="chat"name="hobby">聊天
        <input type="checkbox" value="game"name="hobby">打籃球
    </p>

<!--    按鈕
     input type="button" 普通按鈕
     input type="image" 影像按鈕
     input type="submit" 提交按鈕
     input type="reset" 重置按鈕
-->
    <p>按鈕
        <input type="button" name="btn1" value="點擊變長">
        <input type="image" src="../resources/image/1.jpg"width="50px"height="20px">
    </p>




<!--    下拉框-->

    <p>
        <select name="串列名稱">
            <option value="china"selected>中國</option>
            <option value="us">美國</option>
            <option value="eth">瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>

<!--    文本域
        cols="30" rows="10"
-->
    <p>
        <textarea name="textarea" id="" cols="30" rows="10">文本內容</textarea>
    </p>
<!--    檔案域
        type="file"name="files"
-->
<p>
    <input type="file"name="files">
    <input type="button"value="上傳"name="upload">
</p>




<!--    郵件驗證-->
    <p>郵箱
        <input type="email" name="email">
    </p>
<!--    URL-->
    <p>URL
        <input type="URl" name="URl">
    </p>
<!--    數字-->
    <p>數字
        <input type="number" name="number">
    </p>
    <!--滑塊-->
    <p>音量
        <input type="range" name="voice" min="0" max="100"step="2">
    </p>
<!--    搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>


    <p>
        <input type="submit">
        <input type="reset"value="清空表單" >

    </p>
    <!--    增強滑鼠可用性-->
    <p>
        <label for="mark">你點我試一試</label>
        <input type="text"id="mark">
    </p>
</form>

表單的應用

1. 隱藏域

   hidden

2. 只讀

   readonly

3. 禁用

   disabled

表單初級驗證

常用方式

1. placeholder 提示資訊
2. required 元素不能為空
3. pattern 正則運算式 網址： https://www.jb51.net/tools/regexsc.htm