python學習之網站的編寫（HTML，CSS，JS）（三）----------input系列的標籤詳解及示例程式碼（可上傳到伺服器form標籤）
阿新 • • 發佈：2018-12-11
文章編排，我們首先來講一下input系列的各種內容，然後用一個示例程式碼來清晰的理解其中特定的含義
input系列：
1.輸入文字內容：
<input type="text" name="user"/>起個名字易於在伺服器端進行處理
2.輸入密碼內容:
<input type="password" name="password"/>
3.可提交資料的按鈕：
<input type="submit" value="登入"/>
4.單項選擇：
<input type="radio" name="gender" value="1">
5.多項選擇：
<input type="checkbox" name="favor" value="1">
6.上傳檔案：
<input type="file" name="file">
依賴於form的enctype="multipart/form-data屬性
7.多行文字：
<textarea name="mine">預設值</textarea>
8.重置功能：
<input type="reset" value="重置">
9.與input系列結合的form標籤，它就是一個表單，有了它才可以提交：
form內的都是表單的內容，提交的方式分為兩種：
第一種：
<form method="get">直接拼接到URL的後面
第二種：
<form method="post">放到內容裡提交
示例一：（包含內容1238）提交使用者名稱和密碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退的網頁</title> </head> <body> <form> <input type="text" name="user"/> <!--起個名字為了在服務端進行處理--> <input type="password" name="password"/> <!--點選登入即可提交可以看到網站的後邊新增上了user=..&password=...--> <input type="submit" value="登入"/> </form> </body> </html>
結果：
我們可以看到，我們輸入了賬號和密碼之後，相應的內容就新增到了網站的後邊user=1&password=1
示例2：（包含內容4，8）單項選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逆水行舟不進則退的網頁</title>
</head>
<body>
<form>
<!--div是一個佔一行的白板-->
<div>
<!--p為佔一行的段落-->
<p>請選擇性別</p>
<!--單選設定name一樣他們會互斥，所以只能選擇一個，之後設定value用於區別，並提交給伺服器-->
男：<input type="radio" name="gender" value="1">
女：<input type="radio" name="gender" value="2">
<input type="submit" value="提交">
</div>
</form>
</body>
</html>結果：
點選提交，網站後面加的是gender=2
示例3：（內容包含5）多項選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逆水行舟不進則退的主頁</title>
</head>
<body>
<form>
<div>
<p>愛好</p>
這裡的名字一樣是為了區分不同的類別愛好與技能
籃球：<input type="checkbox" name="favor" value="1">
足球：<input type="checkbox" name="favor" value="2">
網球：<input type="checkbox" name="favor" value="3">
棒球：<input type="checkbox" name="favor" value="4">
<p>技能</p>
吃飯：<input type="checkbox" name="skill" value="1">
睡覺：<input type="checkbox" name="skill" value="2">
玩：<input type="checkbox" name="skill" value="3">
學習：<input type="checkbox" name="skill" value="4">
<input type="submit" value="提交">
</div>
</form>
</body>
</html>結果：
網站後邊提交之後加了favor=1&favor=2&skill=1&skill=2
示例4：（內容包含678）選擇檔案和重置的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逆水行舟不進則退的主頁</title>
</head>
<body>
<form enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="提交">
<input type="reset" value="重置">
<textarea name="mine">null</textarea>
</form>
</body>
</html>結果;
