HTML基礎筆記02-表單 form

阿新 • • 發佈：2020-12-15

HTML基礎筆記02-表單 form

form 標籤標籤用於建立供使用者輸入的 HTML 表單。
表單是讓使用者進行資訊輸入的，將輸入的資料提交到伺服器上，伺服器再根據提交的資料進行分析驗證反饋結果
- action：指定伺服器地址
- method：指定表單資料的提交方式
- get：預設的提交方式，get方式提交的資料會在位址列中顯示出來，很不安全，所能提交的資料量比較小，效率高
  post：效率低，安全，攜帶大量的資料，不會在位址列中顯示
  在開發的過程中post方式使用的較多，考慮安全問題
  注意：表單中的資料想要提交，一定要有name屬性存在

表單中所有的內容都是通過以下三個標籤組成的：

		input
		textarea
		select

程式碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>註冊頁面</title>
	</head>
	<body>
		<p>註冊</p>
		<form action="#" method="get">
			<!-- label標籤為 input 元素定義標註（標記）。
			 input標籤 是單行文字輸入框，是單標籤
			 type是指定輸入框中可輸入的資料型別，若輸入的資料型別與要求的不一致，則預設為text型別
			 name屬性定義了輸入內容的名稱，若要提交資料則必須要有name屬性，用以讓伺服器區分資料對應關係
			 value屬性與name屬性是一對，若指定value值，則無法再輸入，輸入的資料會自動賦給value
			 placeholder設定顯示在輸入框中的提示內容
			 --> 

			<label for="username">暱稱：</label>
			<input type="text" name = "uname" id="username" value="" placeholder="使用者名稱/郵箱/手機號" />
			<br/>
			<label for="pwd">密碼：</label>
			<!-- type="password" 可讓輸入的資訊不明文顯示 --> 

			<input type="password" name="pwd" id="pwd" value="" placeholder="請輸入密碼"/>
			<br>
			
			<span>性別：</span>
			<!-- type="radio" 單選框，只能選一個
				 checked 設定預設值，帶有此屬性的預設為選中
				 同一個選擇中的單選框的name值必須相同-->
			
			<input type="radio" name="gender" id="男" value="男" checked /><label for="男">男</label>
			<input type="radio" name="gender" id="女" value="女"/><label for="女">女</label>
			<br>
			<span>協議：</span>
			<!-- type="checkbox" 單選框
				 checked 設定預設值，帶有此屬性的預設為選中-->
			<input type="checkbox" name="Agreement" value="userAgreement" checked />同意使用者協議
			<input type="checkbox" name="Agreement" value="privateAgreement" /> 同意隱私協議

			<br>
			<!-- 註冊按鈕 -->
			<input type="submit" value="註冊"/>
		</form>
	</body>
</html>

實際顯示：

在這裡插入圖片描述

HTML基礎筆記02-表單 form

技術標籤：HTML筆記html HTML基礎筆記02-表單 form form 標籤標籤用於建立供使用者輸入的 HTML 表單。表單是讓使用者進行資訊輸入的，將輸入的資料提交到伺服器上，伺服器再根據提交的資料進行分析驗證反饋結果

HTML基礎-4（表單）

技術標籤：html HTML基礎-4 表單格式input標籤select標籤textarea標籤表單格式 <!-- form為表單標籤

vue-雙向資料繫結獲取表單form所有值

本文使用vue強大功能之一v-model雙向資料繫結實現一鍵獲取表單所有的值,都存在一個物件裡面，使用JSON.stringify轉換後直接得到ajax中就可以了

html標籤知識(無表單、表格)

flutter 表單form 使用

https://www.jianshu.com/p/9bec3d14df7f 大致用法如下 import \'package:flutter/material.dart\'; class Login extends StatefulWidget {

django基礎之Django表單

表單概述 HTML中的表單單純從前端的html來說，表單是用來提交資料給伺服器的,不管後臺的伺服器用的是Django還是PHP語言還是其他語言。只要把input標籤放在form標籤中，然後再新增一個提交按鈕，那麼以後點選提交按鈕

flutter表單Form內部實現原理淺析

使用示例閱讀原理之前請可以先移步到：flutter 表單Form使用示例，大致瞭解下Form怎麼使用。

vue基礎，收集表單資料

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

表單 form

form 基礎 <form> <!-- 文字框注意：資料要提交到伺服器中，必須要為元素指定一個name屬性值

手把手式教學！ html之一大板塊:表單

技術標籤：前端大開發htmlweb前端大前端表單在網頁中主要負責資料採集功能，目的是使用者輸入與伺服器進行互動，也是html又一大板塊，所以本期單獨列舉表單之內容，幾乎是手把手式教學，希望本文能夠對你有所幫

jQuery基礎---jQuery Validate表單驗證框架學習

一、匯入js庫 <script type=\"text/javascript\" src=\"<%=path %>/validate/jquery-1.6.2.min.js\"></script>

表單form

表單<formaction=\"a.jsp\" method=\"get/post\" enctype=\"application/x-www-form-urlencoded預設/multipart/form-data不對字元編碼，用於檔案上傳/text/plain將空格轉為+，用於表單傳送到電子郵件\">

表單form初始

表單(form) <form action=\"http://192.168.1.3:8080/oa/save\"> 使用者名稱<input type=\"text\" name=\"userName\"></input>

HTML基礎筆記

一、HTML的基本概念和結構 1.HTML的基本概念網頁的三劍客 HTML超文字標記語言【結構】機器人的身體結構

html基礎知識-表格標籤（form，input）

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <!-- <title></title>

html與css製作表單註冊頁面個人理解

常用的表單註冊頁面 1. 第一個註冊頁面我的分析思路：整個內容時居中的，所以需要有一個版心，根據ps測量，內容寬度是1200px，所以我設定版心（.w）為1200px(一般的內容的版心為1200px),再設定居中的屬

Vue學習筆記之表單繫結

1. 概述 1.1. 什麼是資料的雙向繫結 Vue.js是一個MV VM框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。這也算是Vue.js的精髓之處了。值得

表單form標籤

1、form標籤中設定屬性action、name、method、enctype表單資訊提交的編碼方式、target2、輸入標籤input（1）輸入框單行文字框，type設為text，有四個屬性：name、size、maxlength、value密碼輸入框，type設為passwor

php學習筆記之表單

各種表單 1.下拉選單單選 <form action=\"\" method=\"get\"> <select name=\"q\"> <option value=\"\">選擇一個站點:</option>

html form表單基礎入門案例講解

目錄一，表格標籤–1，概述–2，總結二，表單標籤–1，測試–2，總結–3，form提交資料三，form表單的練習四，-1，概述-2，語法-3，入門案例五，選擇器總結一，表格標籤

HTML基礎筆記02-表單 form

HTML基礎筆記02-表單 form

相關推薦