【原】HTML—— 表單標簽（input,lable,textarea等）以及相親網(wǎng)注冊界面實現(xiàn)

流楚丶格念 2022-01-14

展開全文

文章目錄

概念

表單目的是為了收集用戶信息。

在我們網(wǎng)頁中，我們也需要跟用戶進行交互，收集用戶資料，此時也需要表單。

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。

比如當我們在注冊用戶時，就包括：
在這里插入圖片描述

表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：
他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務器。

input 控件(重點)

input 輸入的意思

在上面的語法中，<input />標簽為單標簽，type屬性為其最基本的屬性類型，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input />標簽還可以定義很多其他的屬性，其常用屬性如下表所示。

type 說明了屬于那種表單
radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
在這里插入圖片描述

label標簽(理解)

label 標簽為 input 元素定義標注（標簽）。

作用：用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

text 文本框只能寫一行文本呢

textarea 文本域

如果需要輸入大量的信息，就需要用到<textarea></textarea>標簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
  文本內(nèi)容
</textarea>

比如說發(fā)評論的輸入框

下拉菜單

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

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

注意：

<select></select>中至少應包含一對<option></option>。
在option 中定義selected =" selected "時，當前項即為默認選中項。

表單域

在HTML中，form標簽被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下：

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

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。
method
用于設置表單數(shù)據(jù)的提交方式，其取值為get或post。
name
用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。

注意：

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

案例有緣網(wǎng)

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有緣婚姻網(wǎng)</title>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align=center>
<caption><h4  style="color: pink;font-size: 25px;">你我盡在有緣</h4> </caption>
<tr height="30"> 
<td>姓名：</td>
<td><input type="text" value="二芳" style="color:#ccc;" /> </td>
</tr>
<tr height="30"> 
<td>所在地區(qū)：</td>
<td><input type="text" value="滄州青縣" style="color:#ccc;" /> </td>
</tr>
<tr height="30"> 
<td>電話號碼：</td>
<td><input type="text" value="13785662655" style="color:#ccc;" /> </td>
</tr>

<tr height="30"> 
<td>用戶名：</td>
<td><input type="text" value="喜子" style="color:#ccc;" /> </td>
</tr>
<tr height="30"> 
<td>密碼</td>
<td><input type="password" value="" style="color:#ccc;" /> </td>
</tr>

<!-- 一下是 年齡 -->
<tr height="30">
<td>出生日期</td>
<td>
<select name="" id="">
 <option value="">選擇年份</option>  <!-- option選項 -->
 <option value="">1990</option>  <!-- option選項 -->
 <option value="">1991</option>  <!-- option選項 -->
 <option value="">1992</option>  <!-- option選項 -->
 <option value="">1993</option>  <!-- option選項 -->
 <option value="">1994</option>  <!-- option選項 -->
 <option value="">1995</option>  <!-- option選項 -->
 <option value="">1996</option>  <!-- option選項 -->
 <option value="">1997</option>  <!-- option選項 -->
</select>
<select name="" id="">
 <option value="">選擇月份</option>  <!-- option選項 -->
 <option value="">1月份</option>  <!-- option選項 -->
 <option value="">2月份</option>  <!-- option選項 -->
 <option value="">3月份</option>  <!-- option選項 -->
 <option value="">4月份</option>  <!-- option選項 -->
 <option value="">5月份</option>  <!-- option選項 -->
 <option value="">6月份</option>  <!-- option選項 -->
 <option value="">7月份</option>  <!-- option選項 -->
 <option value="">8月份</option>  <!-- option選項 -->
 <option value="">9月份</option>  <!-- option選項 -->
 <option value="">10月份</option>  <!-- option選項 -->
 <option value="">11月份</option>  <!-- option選項 -->
 <option value="">12月份</option>  <!-- option選項 -->
</select>

</td>
</tr>
<!-- 一下是 籍貫 -->
<tr height="30">
<td>籍貫</td>
<td>
<select name="" id="">
 <option value="">籍貫</option>  <!-- option選項 -->
 <option value="" selected="selected">滄州</option>  <!-- option選項 -->
 <option value="">哈爾濱</option>  <!-- option選項 -->
 <option value="">青島</option>  <!-- option選項 -->
 <option value="">大連</option>  <!-- option選項 -->

</select>

</td>
</tr>

<tr height="30">
<td>性別</td>
<td style="color: blue;">
<input type="radio"  name="sex"  checked="checked"/> 男  
 <input type="radio" name="sex"  /> 女
<input type="radio" name="sex"/> 人妖 
</td>

</tr height="30">
<tr>
<td>喜歡的類型</td>
<td>
  <input type="checkbox" name="love">妖嬈
     <input type="checkbox" name="love">氣質(zhì)
    <input type="checkbox" name="love">嬉皮內(nèi)柔
   <input type="checkbox" name="love" checked="checked" />呼呼嚕嚕
</td>

</tr>

<tr height="30">
<td>上傳頭像</td>
<td>
<input type="file" >

</td>

</tr>
<tr height="60">
<td>給我留言</td>
<td>
<textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支持富文本
</textarea>

</td>

</tr>
<tr>
<td></td>
<td>
<input type="button" value="注冊">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</body>
</html>