1. 程式人生 > 實用技巧 >2020重新出發,JAVA入門,識別符號&修飾符

2020重新出發,JAVA入門,識別符號&修飾符

表單的目的是為了跟使用者進行互動,收集使用者資料

在HTML中,一個完整的表單通常由表單控制元件(也稱為表單元素)、提示資訊和表單域3個部分構成。

表單控制元件:

包含了具體的表單功能項,如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。

提示資訊:

一個表單中通常還需要包含一些說明性的文字,提示使用者進行填寫和操作。

表單域:相當於一個容器,用來容納所有的表單控制元件和提示資訊,可以通過他定義處理表單資料所用程式的url地址,以及資料提交到伺服器的方法。如果不定義表單域,表單中的資料就無法傳送到後臺伺服器。

input 控制元件(重點)

<input />標籤為單標籤,type屬性為其最基本的屬性,其取值有多種,用於指定不同的控制元件型別。除了type屬性之外,<input />標籤還可以定義很多其他的屬性

label標籤(理解)

label 標籤為 input 元素定義標註(標籤)。

作用: 用於繫結一個表單元素, 當點選label標籤的時候, 被繫結的表單元素就會獲得輸入焦點

如何繫結元素呢?

for 屬性規定 label 與哪個表單元素繫結。

textarea控制元件(文字域)

如果需要輸入大量的資訊,就需要用到<textarea></textarea>標籤。通過textarea控制元件可以輕鬆地建立多行文字輸入框,其基本語法格式如下:

<textarea cols="每行中的字元數" rows="顯示的行數">
文字內容
</textarea>

下拉選單

使用select控制元件定義下拉選單的基本語法格式如下

<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>

注意:

  1. <select></select>中至少應包含一對<option></option>

  2. 在option 中定義selected =" selected "時,當前項即為預設選中項。

表單域

在HTML中,form標籤被用於定義表單域,即建立一個表單,以實現使用者資訊的收集和傳遞,form中的所有內容都會被提交給伺服器。建立表單的基本語法格式如下:

<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>

常用屬性:

  1. Action在表單收集到資訊後,需要將資訊傳遞給伺服器進行處理,action屬性用於指定接收並處理表單資料的伺服器程式的url地址。

  2. method用於設定表單資料的提交方式,其取值為get或post。

  3. name用於指定表單的名稱,以區分同一個頁面中的多個表單。

注意: 每個表單都應該有自己表單域。

通過下面案例來了解表單:

<!DOCTYPEhtml> <htmllang="en">
<head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>表單</title> </head>
<body> <formaction=""method="get"name="表單1"> <!--name,表單元素名字--> <!--文字框,使用者可輸入任意文字--> 使用者名稱<inputtype="text"name="username"value="請輸入使用者名稱"><br> <!--密碼框,使用者看不見輸入密碼--> 密碼<inputtype="password"name="password"><br> <!--單選按鈕,實現多選一,必須定義相同的name--> 性別男<inputtype="radio"name="sex"value="男">女<inputtype="radio"name="sex"value="女"><br> <!--複選按鈕,可實現多選--> 愛好吃飯<inputtype="checkbox"name="hobby"value="吃飯">睡覺<inputtype="checkbox"name="hobby"value="睡覺">打豆豆<input type="checkbox"name="hobby"value="打豆豆"><br> <inputtype="submit"> <inputtype="reset"><br>

<!--label標籤增大選中範圍--> <labelfor="text">使用者名稱</label> <inputtype="text"id="text"/><br><br> <!--文字域--> 對我們的看法<textarea></textarea> <inputtype="text">

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