HTML form表單使用
阿新 • • 發佈：2020-12-01
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 <form action="需要提交的地址"> 9 <h2>輸入框</h2> 10 <!-- placeholder設定輸入框中的文字提示 --> 11 <input type="text" placeholder="請輸入使用者名稱"> 12 13 <h2>密碼框</h2> 14 <!-- placeholder設定輸入框中的文字提示 --> 15 <input type="password" placeholder="請輸入密碼"> 16 17 <h2>複選框</h2> 18 <!-- 預設選中用checked --> 19 <input type="checkbox" checked>apple 20 <input type="checkbox">banana 21 <!-- 禁止選中用disabled --> 22 <inputtype="checkbox" disabled>pear 23 24 <h2>單選框</h2> 25 <!-- 通過name值相同來設定單選 --> 26 <input type="radio" name="gender">男 27 <input type="radio" name="gender">女 28 <!-- label標籤讓滑鼠點選文字時也可以選中，通過id值和for值對映 --> 29 <input type="radio" name="gender" id="man"><label for="man">男</label> 30 <input type="radio" name="gender" id="woman"><label for="woman">女</label> 31 32 <h2>上傳檔案</h2> 33 <input type="file"> 34 35 <h2>提交/重置</h2> 36 <input type="submit"> 37 <input type="reset"> 38 39 <h2>多行文字框</h2> 40 <!-- cols表示列 rows表示行 --> 41 <textarea name="" id="" cols="30" rows="10"></textarea> 42 43 <h2>下拉選單</h2> 44 <select name="" id=""> 45 <option value="">蘋果</option> 46 <option value="">香蕉</option> 47 <option value="">橘子</option> 48 </select> 49 50 <h2>設定下拉選單預設選項</h2> 51 <!-- 通過selected --> 52 <select name="" id=""> 53 <option value="">蘋果</option> 54 <option value="" selected>香蕉</option> 55 <option value="">橘子</option> 56 </select> 57 58 <select name="" id=""> 59 <!-- 通過disabled讓其在開啟下拉選單中不能選擇 --> 60 <option value="" selected disabled>請選擇</option> 61 <option value="">蘋果</option> 62 <option value="">香蕉</option> 63 <option value="">橘子</option> 64 </select> 65 66 <!-- size設定下拉選單沒有開啟時顯示的幾項 --> 67 <select name="" id="" size="2"> 68 <option value="">蘋果</option> 69 <option value="">香蕉</option> 70 <option value="">橘子</option> 71 </select> 72 73 <!-- multiple設定可多選 --> 74 <select name="" id="" multiple> 75 <option value="">蘋果</option> 76 <option value="">香蕉</option> 77 <option value="">橘子</option> 78 </select> 79 </form> 80 </body> 81 </html>