表單標籤
阿新 • • 發佈:2020-10-18
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>表單標籤</title> 7 </head> 8 <body> 9 <h3><input>表單元素</h3> 10 <form action="xxx.php" method="get"> 11 <!-- text 文字框 使用者可以裡面輸入任何文字 --> 12 使用者名稱:<input type="text" name="username" value="請輸入使用者名稱" maxlength="6"> <br/> 13 <!-- password 密碼框 使用者看不見輸入的密碼 --> 14 密碼:<input type="password" name="pwd"> <br/> 15 <!-- radio 單選按鈕 可以實現多選 --> 16 <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 --> 17 <!-- 單選按鈕和複選框可以設定checked屬性,當頁面開啟的時候就可以預設選中這個按鈕 --> 18 性別:男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"><br> 19 <!-- checkbox 複選框 可以實現多選 --> 20 愛好:吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby" value="睡覺"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆" checked="checked"> <br> 21 <!-- 點選了提交按鈕,可以把表單域 form 裡面的表單元素裡面的值 提交給後臺伺服器 --> 22 <input type="submit" value="免費註冊"> 23 <!-- 重置按鈕可以還原表單元素初始的預設狀態 --> 24 <input type="reset" value="重新填寫"> 25 <!-- 普通按鈕 button 後期結合js 搭配使用 --> 26 <input type="button" value="獲取簡訊驗證碼"> <br> 27 <!-- 檔案域 使用場景 上傳檔案使用的 --> 28 上傳頭像:<input type="file"> 29 </form> 30 31 </body> 32 </html>