1. 程式人生 > 其它 >10. 表單註冊

10. 表單註冊

10. 表單的註冊

<body>
<!--表單form  <form></>form>需要寫在form標籤之內
<form action="1.我的第一個網頁.html" method="get">
action:表單提交的位置,可以是網站,也可以是一個請求處理地址
method: get/post 提交方式
        get方式提交:我們可以在url中看到我們提交的資訊,  所以不安全 但是高效
        post方式提交: 看不到提交的資訊 ,              所以安全      另外還可以傳輸大檔案
-->
<form action="1.我的第一個網頁.html" method="get">
<!---->  
<!--
input 輸入框
文字輸入框  <input type="text" name="username">
 value="預設初始值為intelliyu"    預設初始值
 maxlength="5"                  能輸入的最多幾個字元
 size="15"                      文字框的長度
-->
<p>名字: <input type="text" name="username" value="預設初始值為intelliyu" maxlength="5" size="15"></p>
    
<!--
密碼輸入框  <input type="password" name="pwd">
--> 
<p>密碼:<input type="password" name="pwd"></p>
</form>

<!--單選框標籤:
 <input type="radio" value="boy" name="sex" checked/>
 value:單選框的值
 name:表示組
 checked 表示預設選中
-->
<form>
<p>性別:
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex" checked/>女
</p>
</form>
    
<!--
多選框標籤:
<input type="checkbox" value="code" name="hobby" checked>
checked 表示預設選中
-->
<form>
<p>愛好:
    <input type="checkbox" value="code" name="hobby" checked>敲程式碼
    <input type="checkbox" value="playgame" name="hobby">打電動
    <input type="checkbox" value="sleep" name="hobby">睡覺
</p>
</form>
    
<!--按鈕標籤
普通按鈕:
<input type="button" name="btn1" value="按鈕上面的字">按鈕1
value : 表示按鈕上面的字
圖片按鈕:
<input type="image" src="../resources/image/1.jpg" >
src 表示圖片路徑
歸納:
input type="button"     普通按鈕
input type="image"      圖片按鈕
input type="submit"     提交按鈕
input type="reset"      重置按鈕
-->
<form>    
<p>按鈕:
    <input type="button" name="btn1" value="按鈕上面的字">按鈕1
    <input type="image" src="../resources/image/1.jpg" >按鈕2
</p>
<p>
    <input type="submit">提交的
    <input type="reset" value="清空表單">重置的
</p>
</form>
    
<!--下拉框 列表框
<select name="列表名稱">
        <option value="選項的值" selected>日本</option>
        <option value="China">中國</option>
</select>
selected表示預設選中的框
-->
<form>    
<p>下拉框:
    <select name="列表名稱">
        <option value="China" selected>中國</option>
        <option value="usa">美國</option>
        <option value="選項的值" selected>日本</option>
        <option value="選項的值">義大利</option>
    </select>
</p>
</form>
    
<!--
文字域:
<textarea name="textarea" cols="10" rows="30">文字內容</textarea>
cols 表示列
rows 表示行
-->
<!--
檔案域
<input type="file" name="files">
name的值可以隨便自己定義  而且name值得寫,不寫上傳之後在位址列中看不到 因為是用name的值=""來顯示的
-->
<form>
<p>文字域:反饋:
    <textarea name="textarea" cols="50" rows="10">文字內容</textarea>
</p>
<p>檔案域:
    <input type="file" name="files">
    <input type="button" value="按鈕上面的字" name="upload">
</p>
</form>
    
<!--一些擴充
    <p>郵件驗證
        <input type="email" name="emails">
    </p>
    <p>url驗證
        <input type="url" name="url">
    </p>
    <p>數字驗證
        <input type="number" name="number" max="100" min="0" step="5">
    </p>
    <p>滑塊(比如音量)
        <input type="range" name="voice" max="100" min="0">
    </p>
    <p>搜尋框
        <input type="search" name="search">
    </p>
-->
<form>
    <p>郵件驗證
        <input type="email" name="emails">
    </p>
    <p>url驗證
        <input type="url" name="url">
    </p>
    <p>數字驗證
        <input type="number" name="number" max="100" min="0" step="5">
    </p>
    <p>滑塊(比如音量)
        <input type="range" name="voice" max="100" min="0">
    </p>
    <p>搜尋框
        <input type="search" name="search">
    </p>
</form>


<!--寫在form外面沒反應-->
<p>
    <input type="submit">提交的
    <input type="reset" value="清空表單">重置的
</p>

<h3>input標籤都需要name值</h3>

</body>