web表單設計器擴展php示例,用php實現一個簡易的web表單生成器

本文目錄一覽：

• 1、表單鏈接數據庫，數據庫該怎麼設計，php連接程序怎麼寫？謝謝，下面是表單代碼。
• 2、FineReport怎麼進行表單設計 FineReport的表單設計簡單示例
• 3、使用WEB表單提交到PHP，POST方式報錯：沒有定義；用GET方式就可以得到值。似乎ASP服務器也這樣。
• 4、關於Web表單設計的經驗分享
• 5、在PHP中，如何設計表單可以實現如下功能： 可以添加行，進行多條數據的錄入，再提交到數據庫中。
• 6、有好用，開源的 Web 表單設計器嗎

表單鏈接數據庫，數據庫該怎麼設計，php連接程序怎麼寫？謝謝，下面是表單代碼。

網頁：

body

form action=”Connection.php”method=”post”

table bgcolor=”#eeeeee”

tr

td colspan=”2″ align=”center”b情況登記/b

tr

td姓名:tdinput size=”20″ type=”text” name=”name”

tr

td密碼:tdinput size=”20″ type=”password” name=”password

tr

td性別:tdinput type=”radio” name=”stuSex” value=”0″男input type=”radio” name=”stuSex” value=”1″女

tr

tdtdinput type=”submit” value=”提交”/ainput type=”reset”value=”重寫”

/table

/form

/body

數據庫表:

CREATE DATABASE `student`;

CREATE TABLE `student` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`name` varchar(50) NOT NULL,

`password` varchar(50) NOT NULL,

`stusex` int(1) NOT NULL,

PRIMARY KEY (`id`)

);

PHP Connection.php代碼:

?php

$db = mysql_connect(‘localhost’, ‘root’, ‘123456’); //root是數據庫賬號 123456 是數據庫密碼

if (!$db) {

die(‘無法連接: ‘ . mysql_error());

}

mysql_select_db(‘student’, $db) or die (‘無法使用數據庫: ‘ . mysql_error());

$name = trim(strip_tags($_POST[‘name’]));

$password = md5(trim($_POST[‘password’]));

$stusex = intval($_POST[‘stusex’]);

$sql = “insert into student (`name`,`password`,`stusex`) values (‘$name’,’$password’,’$stusex’)”;

mysql_query($sql) or die(“無法保存學生數據: ” . mysql_error());

die(“保存成功”);

?

FineReport怎麼進行表單設計 FineReport的表單設計簡單示例

我一直用finereport，超級適合中國式複雜報表，表單製作功能也超級好，

FineReport是一款報表軟件，它的報表操作功能是報表軟件中的佼佼者。

新建表單點擊文件新建表單，如下圖：

拖入組件

如上圖所示的效果圖，我們可以看到該表單需要有1個下拉框控件，一個文本控件，以及對應的2個標籤控件，還需要一個以表格形式顯示數據的報表塊，此時，我們確定了需要在表單中添加一個報表塊，4個控件。

在組件介紹中，我們知道控件即可依附於參數面板組件存在，也可以單獨以組件的形式存在，在這裡可隨意使用哪種形式，效果都一樣，那麼使用依附於參數面板組件存在的形式。

參數組件

從工具欄中將參數組件拖拽至表單主體中，並將相應的四個控件：下拉框、文本、2個標籤控件拖拽至參數組件中，並設置標籤控件的控件值分別為：訂單ID和客戶ID，如下圖：

報表塊組件

從工具欄中將報表組件也拖拽至表單主體中，如下圖：

如果組件數量過多，在web端展示的時候自適應在一頁內顯示會比較擁擠，那麼此時可以可以再右側下方選中整體框架body，在右側上方的屬性表中將組件縮放修改為自適應原樣縮放，如下圖：

充滿展現區域：是指在web端展示的時候，所有組件自適應充滿整個瀏覽器頁面顯示，不出現滾動條；自適應原樣縮放：是指在web端展示的時候根據製作表單時候組件大小比例顯示，並不縮放充滿整個web頁面，如果超過頁面大小，會出現滾動條。

控件綁定數據

定義數據集

效果圖中，新建數據集ds1：SELECT

*

FROM

訂單

where

訂單ID=${orderid}，參數orderid的默認值為10001,。

註：參數名字必須與訂單ID下拉框控件名稱保持一致。

訂單ID下拉框

選中下拉框控件拖拽到適當位置，下拉框控件名設為「orderid」，數據字典來自FRDemo數據庫的訂單表（數據類型選擇數據庫表，數據庫選擇FRDemo），實際值和顯示值均為訂單ID，控件值為空。

客戶ID文本框

選中文本框控件拖拽到適當位置，文本框控件名為customerid，控件值選擇為綁定字段，數據來源於ds1數據集中的客戶ID字段，如下圖：

註：此處選擇ds1數據集是為了實現下拉框與文本框的聯動，下拉框控件名稱為orderid，ds1數據集根據orderid參數對數據進行了過濾，也就是ds1數據集根據下拉框控件的值對數據進行了過濾。

報表塊

參數面板與控件都已經設置好之後，點開報表塊裏面的觸筆按鈕，進行報表塊編輯界面。

新建數據集

效果圖中，報表塊裏面要顯示訂單明細數據，根據訂單ID進行過濾，新建數據集ds2：select

*

from

訂單明細

where

訂單ID=${orderid}，orderid默認值為10001.

表樣設計

如下圖所示，設計表樣：

到此為止，表單就已經製作好了。

保存表單並預覽

保存表單，表單模板後綴名為.frm，點擊預覽按鈕進行預覽，即可看到效果。

希望對題主有幫助

使用WEB表單提交到PHP，POST方式報錯：沒有定義；用GET方式就可以得到值。似乎ASP服務器也這樣。

我也遇到過一次，用get可以，POST卻不行。我那次問題是因為表單類型問題

form action=”ok.php” method=”post” enctype=”text/plain”

/form

去掉後面的enctype=”text/plain”就可以了，這個東西是在php文件中按快捷創建post表單時自動加上的,get則不會。

不知道你的問題和我的一樣不

關於Web表單設計的經驗分享

表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關於表單設計的知識點分享給大家～

一、什麼是表單？

表單在網頁中的主要功能是負責採集數據以及向服務器傳送數據的。表單是採集用戶信息數據重要的途徑。好的表單設計能提升信息採集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息採集不成功甚至帶來利益的損失。

二、表單的構成

表單通常由標籤、輸入域、操作按鈕、這三部分構成。

標籤

標籤我們可以把它理解為標題，告訴用戶該表單需要填寫什麼信息、該表單需要採集什麼內容。標籤通常出現在輸入域的左邊、頂部、或者輸入域內。

標籤按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標籤內容加上＊號。＊號的的擺放位置有下面兩種情況：

1.當標籤與輸入域居中對齊時，建議把＊號放在標籤左側。

因為＊號比較顯目，用戶往往第一眼會先看到它，然後按照用戶從左往右的閱讀習慣，視覺落點分別為文字標籤、輸入域。考慮到表單的填寫效率，＊號位於左側的表單閱讀起來會更加順暢。所以當標籤與輸入域居中對齊時，把＊號放在標籤左側會更好。

2.當標籤與輸入域左對齊時，建議把＊號放在標籤右側。

由於人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側並不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標籤右側會更好。

輸入域

輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框、和文件上傳框等等。

不知道這些輸入域的區別的小夥伴可以去ant design官網學習一下，傳送門：

因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入後。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮光標的設計、輸入文字信息的設計，信息提示等，在輸入後：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細緻，越能提高信息錄入的成功率。

操作按鈕

操作按鈕是在用戶填寫完表單各項內容後，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一範圍的內容起作用，比如編輯、刪除操作。

三、表單設計常見問題

1.標籤採用哪種對齊方式更好？

在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該採用哪種對齊方式。標籤的處理原則就是要要盡量對齊，採用哪種對齊方式應考慮具體的制約因素和目標來定。

左對齊

當標籤採用左對齊的方式的時，因為文字標籤的長度不統一，導致標籤與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。

如果採用左對齊的形式，就要盡量去保持文字標籤的長度一致，比如通過字距的調整讓文字標籤的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，採取左對齊形式，但是它留足了文字標籤與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。

頂對齊

採用頂對齊的形式，會讓標籤和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用於橫向寬度較窄的頁面。

▵頂對齊

右對齊

右對齊跟左對齊一樣會因為標籤長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。

▵右對齊

在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊右對齊左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合複雜表單。

2.操作按鈕應該用哪種設計形式比較好？

對於全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。

主按鈕

主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作並點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。

次按鈕

次按鈕的層級相對於主按鈕層級要弱一些，通常採用線性形式。在一個頁面中可以出現多個次按鈕。

對於局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至於應該應用哪種形式就要結合具體端場景去考慮。

圖標按鈕

圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易於理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶鼠標停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當鼠標停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。

在web設計中，由於按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。

文字按鈕

文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。

圖標＋文字 按鈕

圖文結合的按鈕相對於純文字按鈕會更加直觀，也能更吸引用戶注意。

3.輸入框應該設計幾種狀態？

考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。

為了避免用戶填寫完所有信息後，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。

▵及時反饋錯誤信息

在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。

輸入框到底應該設計幾種狀態我們也需要根據我們表單的複雜情況去考慮，對於簡單的表單設計過於細化的狀態是沒有必要的。

寫在最後的話

表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照着別人的設計規範抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規範比如ant design的組件規範時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什麼規律嗎？按鈕的上下邊距與左右邊距有什麼關係嗎？通過這些思考，然後去觀察總結，並轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。

往期解析

UI設計－首頁解析

詳情頁設計技法解析

輕鬆get文字標籤設計技法    

Get點9切圖方法（內附切圖神器）

在PHP中，如何設計表單可以實現如下功能： 可以添加行，進行多條數據的錄入，再提交到數據庫中。

將多條的數據 名稱設置為xxx[] 這樣的格式 帶有[]的那種 固定的單獨存到一個表單里 在接受頁面 使用foreach循環xxx數組 然後進行添加

有好用，開源的 Web 表單設計器嗎

剛剛看到一個：WEB表單設計器 Ueditor Formdesign Plugins -leipi.org

javascript的，不知道是否能滿足你要求。我也正在了解，還沒用過