建立一個HTML的form表格表單

阿新 • • 發佈：2019-01-16

建立一個HTML的form表格形式的表單，我們要實現如圖的樣式：

話不多說，直接上程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用者資訊</title>
	</head>
	
	<body>	
		
		<!--
        	form表單部分：用來傳輸資料 是一個整個元件
        
        	form屬性
        	action:將表單內容提交的地址
        		我將提交地址設為了百度_(:зゝ∠)_
        
        	method:提交的方式有兩種get和post
        		這裡我使用的get方式
        	
        -->
        <form action="https://www.baidu.com" method="get">
        
			<!--
            	border用來規定表格邊框的寬度
            	align表格在網頁中的對齊方式
            	cellpadding規定單元邊緣和其中內容的空白大小
            	cellspacing規定單元格之間的空白大小
            -->
			<table border="1" align="center" cellpadding="1" cellspacing="2" >
				<tr>
					<td width="125" height="35">使用者名稱：</td>
					<td width="300" ><input type="text" name="username"/></td>
				</tr>
				<tr>
					<td width="125" height="35">密碼：</td>
					<td width="300"><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td width="125" height="35">性別:</td>
					<td width="300">
						<input type="radio" name="sex" value=1 />男
						<input type="radio" name="sex" value=0 />女
					</td>
				</tr>
				<tr>
					<td width="125" height="35">愛好：</td>
					<td width="300">
						<input type="checkbox" name="hobby" value="basketball" />籃球
						<input type="checkbox" name="hobby" value="football" />足球
						<input type="checkbox" name="hobby" value="badminton" />羽毛球
					</td>
				</tr>
				<tr>
					<td width="125" height="35">來自：</td>
					<td width="300">
						<select>
							<option value="上海">上海</option>
							<option value="北京">北京</option>
							<option value="廣州">廣州</option>
							<option value="成都">成都</option>
							<option value="鄭州">鄭州</option>
						</select> 
					</td>
				</tr>
				<tr>
					<td width="125" height="35">照片：</td>
					<td width="300">
						<input type="file" name="photo"
					</td>
				</tr>
				<tr>
					<td width="125" height="35">介紹：</td>
					<td width="300">
						<textarea cols="50" rows="5"></textarea>
					</td>
				</tr>
				<tr>
					<td width="125" height="35" colspan="2">
						<input type="submit" value="提交資料"/>
						<input type="reset" />
					</td>
	
				</tr>
			</table>
		</form>
	</body>
</html>

目的是設計一個表格格式的表單，那就主要是熟悉對<table>標籤的使用。

<table> 標籤定義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

<tr> 標籤定義 HTML 表格中的行。
tr 元素包含一個或多個 th 或 td 元素。

<td> 標籤定義 HTML 表格中的標準單元格。
HTML 表格有兩類單元格：
表頭單元 - 包含頭部資訊（由 th 元素建立）
標準單元 - 包含資料（由 td 元素建立）

td 元素中的文字一般顯示為正常字型且左對齊。

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

2.9 使用Eureka快速優雅地建立一個漂亮的表單 [iOS開發中的神兵利器]

1. 本節課將為您演示，如何使用第三方庫，快速建立強大的表單。首先確保在您的專案中，已經安裝了所需的第三方庫。雙擊此處檢視安裝配置檔案。 2. 根據配置檔案中的相關設定，安裝第三方庫。安裝完成之後，雙擊開啟此處的專案檔案。 3. 然後在左側的專案導航區，開啟檢視控制器的程式碼

js 建立一個post虛擬表單

[Swift通天遁地]二、表格表單-(9)快速建立一個美觀強大的表單

本文將演示如何利用第三方庫，快速建立一個美觀強大的表單首先確保在專案中已經安裝了所需的第三方庫。點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5

建立一個HTML的form表格表單

建立一個HTML的form表格形式的表單，我們要實現如圖的樣式：話不多說，直接上程式碼：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&

[Swift通天遁地]二、表格表單-(1)建立自定義的UITableViewCell(單元格類)

本文將演示如何在表單檢視中，新增一個自定義的單元格類。首先建立一個自定義的單元格類。在專案資料夾【DemoApp】上點選滑鼠右鍵，彈出右鍵選單。【New File】->【Cocoa Touch Class】->【Next】-> 【Class】：CustomizeUITableV

[Swift通天遁地]二、表格表單-(2)建立右側帶有索引的UITableView(表單檢視)

本文將演示如何給表格新增索引功能。在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】現在開始編寫程式碼，建立一個表格，並在表格右側新增一列快捷索引。 1 import UIKit 2 3 //使當前的檢視控制器類，遵循表格的資料來源協議UIT

[Swift通天遁地]二、表格表單-(3)在表格中巢狀另一個表格並使Cell的高度自適應

本文將演示如何在表格中巢狀另一個表格並使Cell的高度自適應，建立更加強大的佈局效果。在專案資料夾【DemoApp】上點選滑鼠右鍵，彈出右鍵選單。【New File】->【Cocoa Touch Class】->【Next】-> 【Class】：CustomizeUITableVi

[Swift通天遁地]二、表格表單-(3)在表格中嵌套另一個表格並使Cell的高度自適應

works uiview 添加 comm exe bounds tro enc 表格本文將演示如何在表格中嵌套另一個表格並使Cell的高度自適應，創建更加強大的布局效果。在項目文件夾【DemoApp】上點擊鼠標右鍵，彈出右鍵菜單。【New File】->【C

html表格表單標簽的結合

-h 單元 adding set 不能表單標簽 ges 青島 sub 今天我嘗試將表格表單基本標簽結合起來放在網頁中，發現再沒用表單元素中<form></form>時各類標簽功能都可顯示，只是不能提交網頁，所有與提交網頁的標簽都不能使用提交功能，而

【html學習整理】meta,img,表格,表單

utf-8 rds 間距自己的 title 實體 tip HR 例題 meta標簽: 　　　　作用: 給搜索引擎用。告訴瀏覽器是什麽編碼　　　　<meta charset="UTF-8"> 　　　　<meta name="keywords", co

element UI表單驗證：一個複雜迴圈表單渲染後資料修改後的部分表單項驗證

一、前言普通的表單驗證參考element UI官方文件即可找到解決方案並順利進行程式碼實現，官方也給出了幾個示例，是很好的參考。不過，對於複雜的表單驗證，官方文件並沒有給出過多示例或者說明。文章中的例項就是在實際專案中遇到的一個複雜表單的驗證問題。文章中前端程式碼基

前端網頁學習 Day50(表格表單音視訊形變瀏覽器適配)

div { width: 150px; height: 150px; background-color: red; margin: 10px auto; transition: 3s; } /*旋轉形變:旋轉的是角度 deg*/ .d1:hover { /

小白學前端------------------HTM列表,表格,表單,音視訊標籤及屬性

頁面中的組成部分一.列表,表格,表單,音視訊 1.列表標籤有序列表 <ol><ul></ul></ol> 屬性 start 規定有序列表的起始值。 type 規定在列表中使用的標記型別。(1 a A

pandas追加寫入excel---建立多個sheet表單

在寫入表格時候給自己挖了個坑，圖省事直接用to_excel（fileuri，sheetname）寫入，怎麼寫怎麼覆蓋。後來隱約感覺到是自動關閉writer的鍋，改成writer讀寫後就好了。 writer = pd.ExcelWriter(filepath) compa

php基礎教程——2建立模板、處理表單

一.建立模板：將頁面中經常出現的部分複製到一個html或php檔案中，在原頁面中用require()/include()函式引入。例子：源html：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional

[Swift通天遁地]二、表格表單-(1)創建自定義的UITableViewCell(單元格類)

pre bound tex 右鍵菜單 cells nib 控件綁定根視圖 thumbnail 本文將演示如何在表單視圖中，添加一個自定義的單元格類。首先創建一個自定義的單元格類。在項目文件夾【DemoApp】上點擊鼠標右鍵，彈出右鍵菜單。【New File】-

[Swift通天遁地]二、表格表單-(4)使用系統自帶的下拉重新整理控制元件，製作表格的下拉重新整理效果

本文將演示如何使用系統自帶的下拉重新整理控制元件，製作表格的下拉重新整理效果。在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】現在開始編寫程式碼，實現表格的下拉重新整理功能。 1 import UIKit 2 3 //使當前的檢視控制器類，遵循表

[Swift通天遁地]二、表格表單-(7)電子郵件Mail：實現單元格左右滑動調出功能按鈕

本文將演示對單元格進行擴充套件，當手指在單元格左右滑動時，彈出不同的功能選單。 Github專案：【MGSwipeTableCell】下載該專案的原始碼。資料夾【demo】->資料夾【MailAppDemoSwift】->資料夾【MailAppDemoSwift】 ->雙擊檔案【Ma

js動態建立隱藏的form表單

function makeForm() { // 建立一個 form const tempForm = document.createElement("form"); tempForm.id = "tempForm"; tempForm.name = "tempForm"

[Swift通天遁地]二、表格表單-(8)快速實現表單的輸入驗證

本文將演示如何快速實現表單是輸入驗證。首先確保在專案中已經安裝了所需的第三方庫。點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source '

建立一個HTML的form表格表單

相關推薦