HTML+CSS 輕松入門之表單

一：表單

? ? 表單是由<form></form>構成

? ? 表單用于收集信息，例如注冊：需要輸入用戶名，密碼，郵箱，手機號，驗證碼等，這些數(shù)據都是通過表單提交，在另外的頁面去接收這些信息

? ? 如何寫表單如下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>歡迎學習表單</title>
</head>
<body>
<form></form>
</body>
</html>

這樣我們就已經把一個簡單的表單寫好了，大家看下下面的屬性參數(shù)：

接下來我們看表單標簽的幾個常用的屬性

1. action

2.method

?3.enctype="multipart/form- data"

action

action 屬性定義在提交表單時執(zhí)行的動作。

向服務器提交表單的通常做法是使用提交按鈕。

通常，表單會被提交到 web 服務器上的網頁。

請看以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>歡迎學習表單</title>
</head>
<body>
<form action="login.php">
<!-- 表單元素等 -->
</form>
</body>
</html>

看以上代碼，我們的表單是提交到login.php，在login.php 這個文件中，我們可以獲取表單的信息，從而進行處理，進行判斷或者添加到數(shù)據庫等

method

method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）：

后面我們會講到倆者之間的區(qū)別

enctype="multipart/form- data"

當我們要上傳文件時，這句話就必須要放進表單中

表單元素（重點）

1.文本框 ? ? ??????<input type="text" name="name" id=1>

2.隱藏域 ? ? ? ? ?<input type="hidden" name="hid" id=2>

3.文本域 ? ? ? ? <textarea name="content"></textarea>

4.單選按鈕 ? ? ? <input type="radio" name="radio" value="radio" />

5.復選框 ? ????? ?<input type="checkbox" name="checkbox" value="checkbox" />

6.下拉框?????????<select name="select"></select>

7.上傳文件 ? ? <input type="file">

8.按鈕 ? ? ? ? ? 提交：submit ? ?重置：reset ? ?提交：button

接下來我們把這些表單元素整合到一個實例中，如下代碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>歡迎學習表單</title>
</head>
<body>
		<form action="login.php" method="post" enctype="multipart/form- data">
			姓名：<input type="text" name="name" id=1><br><br>

				  <input type="hidden" name="hidd">  <!--隱藏域默認是不顯示的-->

			簡介：<textarea name="text" rows="10" cols=""></textarea> <br><br> 
			<!--rows是要寫多少行     cols每行要寫多少個字符-->

			國籍：<input type="radio" name="radio" value="radio" checked/>中國
				  <input type="radio" name="radio" value="radio" />美國
				  <input type="radio" name="radio" value="radio" />日本
			<!--注：當使用單選按鈕時，必須要有一個相同的name屬性-->

			<br><br>

			愛好：<input type="checkbox" name="checkbox" value="checkbox" checked/>籃球
				  <input type="checkbox" name="checkbox" value="checkbox" />足球
				  <input type="checkbox" name="checkbox" value="checkbox" />音樂
			<br><br>


			來自： <select>
						<option selected>安徽</option>
						<option>上海</option>
						<option>北京</option>
						<option>浙江</option>
				   </select>

			<br><br>
			
			<input type="file">            <!--上傳文件-->
			
			
                        <br><br>
			<input type="submit" value="提交">	   
			<input type="reset" value="重置">
			<input type="button" value="添加">

		</form>
</body>
</html>

單選和多選，默認選中是checked ??可以直接在input中寫入

也可寫成chechked=”checked”

下拉框，默認選中selected

按鈕

reset重置 ?當我們表單內有信息的時候，點擊，會把內容清空

Submit ?與 button 的區(qū)別

當我們點擊submit按鈕 ?表單會提交到一個頁面，點擊button 時，沒有實現(xiàn)跳轉

Button需要綁定事件來觸發(fā)，當觸發(fā)事件時，表單也會提交

POST與GET 的倆種提交方式

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>post</title>
</head>
<body>
  <form action="index.php" method="post">
   姓名：<input type="text" name="name"><br><br>
   密碼：<input type="password" name="pwd"><br><br>
   <input type="submit" value="登錄">
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>post</title>
</head>
<body>
  <form action="index.php" method="get">
   姓名：<input type="text" name="name"><br><br>
   密碼：<input type="password" name="pwd"><br><br>
   <input type="submit" value="登錄">
  </form>
</body>
</html>

使用get會把表單提交的內容展示在地址欄上，使用post 方式就不會展示表單提交的信息，

總體來說，大部分表單提交都會使用post 方式，安全性高

1.Post傳輸數(shù)據時，不需要在URL中顯示出來，而Get方法要在URL中顯示。
2.Post傳輸?shù)臄?shù)據量大，可以達到2M，而Get方法由于受到URL長度的限制,只能傳遞大約1024字節(jié).
3.Post顧名思義,就是為了將數(shù)據傳送到服務器段,Get就是為了從服務器段取得數(shù)據.而Get之所以也能傳送數(shù)據,只是用來設計告訴服務器,你到底需要什么樣的數(shù)據.Post的信息作為http請求的內容，而Get是在Http頭部傳輸?shù)?/p>

繼續(xù)學習

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎學習表單</title> </head> <body> <form action="login.php" method="post"> 姓名：<input type="text" name="name" id=1><br><br> <input type="hidden" name="hidd">  簡介：<textarea name="text" rows="10" cols=""></textarea> <br><br>  國籍：<input type="radio" name="radio" value="radio" checked/>中國 <input type="radio" name="radio" value="radio" />美國 <input type="radio" name="radio" value="radio" />日本  <br><br> 愛好：<input type="checkbox" name="checkbox" value="checkbox" checked/>籃球 <input type="checkbox" name="checkbox" value="checkbox" />足球 <input type="checkbox" name="checkbox" value="checkbox" />音樂 <br><br> 來自： <select> <option selected>安徽</option> <option>上海</option> <option>北京</option> <option>浙江</option> </select> <br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="添加"> </form> </body> </html>

提交重置代碼

自動運行