【零基礎網頁開發】 第十六課 form表單常用元素

ALeSoleil發表於2020-10-24
網頁ORM

一、表單作用

1. 主要功能

用來提交使用者資訊給伺服器。

2. 存放標籤

（1）input type 各種型別，如單選框、多選框
（2）select option下拉選單
（3）textarea 文字域，可以多行
（4）button 按鈕

3. 提交內容

其提交的是內部帶有name標籤的元素給action對應的頁面。

4. 資料提交方式：

（1）post：可以提交大量的資料；
（2）get：提交資料較少。

二、css

1. text-align: center：

控制標籤內部居中。

2. 使用 “，” 同時設定多個元素：
.wrapper form input.txt, .wrapper form select{
	width: 300px;
	height: 30px;
	margin: 5px;
}

三、radio單選框

1. name屬性值：

相同則表示 同一組 ，不可以被同時勾選。

四、專案程式碼

注：新建了一個名為data的目錄，裡面新建了一個reg.php檔案

1. index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form 1023</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<div class="wrapper">
			<h1>註冊資訊</h1>
			<form action="data/reg.php" method="post">
				帳號：<input class="txt" type="text" name="un" id="un" value="" placeholder="註冊使用者名稱"/>
				<br/>
				密碼：<input class="txt" type="password" name="pwd" id="pwd" value="" placeholder="輸入密碼"/>
				<br/>
				國家：
				<select name="country">
					<option value ="cn">中國</option>
					<option value ="usa">美國</option>
					<option value ="uk">英國</option>
				</select>
				<br/>
				性別：
				<input class="op" type="radio" name="sex" id="sex_m" value="male" />男
				<input class="op" type="radio" name="sex" id="sex_f" value="female" />女
				<br/>
				愛好：
				<input class="op" type="checkbox" name="hobby" value="1" />sing
				<input class="op" type="checkbox" name="hobby" value="1" />dance
				<input class="op" type="checkbox" name="hobby" value="1" />reading
				<br/>
				<input class="sub" type="submit" value="提 交"/>
			</form>
		</div>
	</body>
</html>
2. main.css
.wrapper{
	width: 400px;
	padding: 10px;
	margin: auto;
	border: 1px solid #ccc;
}
.wrapper h1{
	text-align: center;  /* 標籤內部居中 */
}
.wrapper form input.txt, .wrapper form select{
	width: 300px;
	height: 30px;
	margin: 5px;
}
.wrapper input.op{
	width: 15px;
	margin: 5px;
}
.wrapper .sub{
	margin-top: 10px;
	width: 100%;
	height: 30px;
}
3. 執行結果

執行結果

相關文章