Javaweb基礎入門HTML之table與form

2022-03-04 16:00:21

前章知識

HTML簡介：

超文字是一種組織資訊的方式，它通過超級連結方法將文字中的文字、圖表與其他資訊媒體相關聯。這些相互關聯的資訊媒體可能在同一文字中，也可能是其他檔案，或是地理位置相距遙遠的某臺計算機上的檔案。這種組織資訊方式將分佈在不同位置的資訊資源用隨機方式進行連線，為人們查詢，檢索資訊提供方便

本節用到的單詞意思：

border：邊框、邊界。
cellspacing:單元格間距、細胞間距
spacing:覆蓋
submit：提交
button：按鈕
font：字型
action：行動
checked：選中的
option：選項
textarea：文字區

table的相關用法

表格 table

行 tr

列 td

表頭列：th

<table border="1" witdth="5" cellspacing="2.5" cellpadding="20">
			<tr align="center" ><!--這表示行-->
				<!--border="1" witdth="5" cellspacing="2.5" cellpadding="10"
				已經被淘汰-->
				<th>姓名</th><!--這表示列-->
				<th>班級</th>
				<th>學號</th>
			</tr>
			<tr><!--這表示行-->
				<td>笑霸fianl</td>
				<td>4班</td>
				<td>001</td>
			</tr>
			<tr><!--這表示行-->
				<td>鍾鍾</td>
				<td>4班</td>
				<td>002</td>
			</tr>
			<tr><!--這表示行-->
				<td>刀刀</td>
				<td>4班</td>
				<td>003</td>
			</tr>
			<tr><!--這表示行-->
				<td>茂茂</td>
				<td>4班</td>
				<td>001</td>
			</tr>
		</table>

表格 table有如下屬性：
border:表格邊框的粗細
width:寬度
cellspacing:表格間距

cellpadding:表格填充

行 tr有如下屬性：
center(中),left(左預設),right(右)

位置發生了變化。

form的相關用法

定義和用法

標籤用於為使用者輸入建立 HTML 表單。表單能夠包含 input 元素，比如文字欄位、核取方塊、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向伺服器傳輸資料。

輸入元素

文字域（Text Fields）

文字域通過<input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數位等內容時，就會用到文字域。

 <form>
暱稱：<input type="text" name="usr" value="請輸入你的暱稱"/><br />
</form>

瀏覽器顯示如下：

注意:表單本身並不可見。同時，在大多數瀏覽器中，文字域的預設寬度是 20 個字元。

密碼欄位

密碼欄位通過標籤<input type="password"> 來定義:

<form>
密碼：<input type="password"	 name="pwd"/>
</form>

瀏覽器顯示效果如下:

注意:密碼欄位字元不會明文顯示，而是以星號或圓點替代。

無線電鈕（Radio Buttons）

<input type="radio">標籤定義了表單單選框選項

<form>
性別：<input type="radio" name="iox" value="male" checked="checked"/>男
        		  <input type="radio" name="iox" value="female" />女
        		  <input type="radio" name="iox" value="both"/>雙性<br />
        		  <!-- checked="checked"就是預設選擇 可以省略為checked
        		  <input type="radio" name="iox" value="male" checked/>男
-->
</form>

瀏覽器顯示效果如下:

核取方塊（Checkboxes） <input type="checkbox">定義了核取方塊. 使用者需要從若干給定的選擇中選取一個或若干選項。

<form>
愛好：<input type="checkbox" name="like" value="bsk" checked/>籃球
        		  <input type="checkbox" name="like" value="pp" checked/>乒乓球
        		  <input type="checkbox" name="like" value="fdb"/>足球
</form>

瀏覽器顯示效果如下:

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

瀏覽器顯示效果如下:

textarea：多行文字方塊

注意：

<textarea name="beizhu" rows="4" cols="50"></textarea>
<textarea name="beizhu" rows="4" cols="50">這裡不要輕易打回車 不然會有預設的value值
</textarea>

	備註：<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br />
      		<input type="submit" value="註冊" />
        	<input type="reset" value="重置" />

綜合程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表單學習</title>
		<!--
        	表單 form
        -->
        
        <form style="border:1px solid darkorchid" action="02表單02.html"  >
        	暱稱：<input type="text" name="usr" value="請輸入你的暱稱"/><br />
        	密碼：<input type="password"	 name="pwd"/><br />
        	性別：<input type="radio" name="iox" value="male" checked="checked"/>男
        		  <input type="radio" name="iox" value="female" checked/>女
        		  <input type="radio" name="iox" value="both"/>雙性<br />
        	愛好：<input type="checkbox" name="like" value="bsk" checked/>籃球
        		  <input type="checkbox" name="like" value="pp" checked/>乒乓球
        		  <input type="checkbox" name="like" value="fdb"/>足球
        	<br />
        	生肖：<select>
        		<option>鼠</option><option>牛</option><option>虎</option><option>兔</option>
        		<option selected value="5">龍</option><option>蛇</option><option>馬</option><option>羊</option>
        		<option>猴</option><option>雞</option><option>狗</option><option>豬</option>	
        	</select><br />
        	
        	備註：<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br />
      		<input type="submit" value="註冊" />
        	<input type="reset" value="重置" />
        
        
        </form>
	</head>
	<body>
	</body>
</html>

效果如下：