<input type="radio"> 單選框
適用於 選擇性別按鈕網頁等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <div> <!-- 單選框 --> <input type="radio"> </div> </form> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <form action="http://www.baidu.com" method="get"> <div> <p> 請選擇性別: 男<input type="radio"> 女<input type="radio"> </p> </div> <input type="submit" value="提交"> </form> </body> </html>
設置checked屬性 默認選中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <form action="http://www.baidu.com" method="get"> <div> <!-- checked被默認選中 --> <p> 請選擇性別: 男<input type="radio" checked> 女<input type="radio"> </p> </div> <input type="submit" value="提交"> </form> </body> </html>
提交到后台時候 選中一個提交一個就可以了 用value區分提交哪個
把value提交就可以了
input type=‘radio’ - 單選框 value,name屬性(產生互斥效果:name要相等)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <form action="http://www.baidu.com" method="get"> <div> <!-- 產生互斥效果:name要相同--> <p> 請選擇性別: 男<input type="radio" name="gender" value="1" checked> 女<input type="radio" name="gender" value="2"> </p> </div> <input type="submit" value="提交"> </form> </body> </html>
點擊提交
url上顯示gender=1 就是男
提交
gender=2 女的
key-value形式