radio-button « WordPress.com Tag Feed

Simple PHP + MySQL form with radio button and dropdown list

ykyuen — Sun, 29 Nov 2009 06:20:55 +0000

First, create a MySQL database with the following table

CREATE TABLE IF NOT EXISTS 'data' (
  'id' int(10) unsigned NOT NULL,
  'english_name' varchar(50) collate utf8_unicode_ci NOT NULL,
  'tel_number' varchar(8) collate utf8_unicode_ci NOT NULL,
  'email_address' varchar(50) collate utf8_unicode_ci NOT NULL,
  'gender' varchar(1) collate utf8_unicode_ci NOT NULL,
  'age' varchar(10) collate utf8_unicode_ci NOT NULL,
  'region' varchar(10) collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Prepare a update.php for the MySQL connection.

<?php
	$english_name = $_POST['EnglishName'];
	$tel_number = $_POST['TelNumber'];
	$email_address = $_POST['EmailAddress'];
	$gender = $_POST['Gender'];
	$age = $_POST['Age'];
	$region = $_POST['Region'];

	mysql_connect("[mysql_server]", "[username]", "[password]") or die ('Error: ' . mysql_error());
	mysql_select_db("[database_name]");

	$query="INSERT INTO data (english_name, tel_number, email_address, gender, age, region) VALUES (";
	$query.="'".$english_name."', ";
	$query.="'".$tel_number."', ";
	$query.="'".$email_address."', ";
	$query.="'".$gender."', ";
	$query.="'".$age."', ";
	$query.="'".$region."')";

	mysql_query($query) or die ('Error updating database');

	echo "Record is inserted.";
?>

Prepare the form.php

<html>
<head>
	<title>Simple PHP Form</title>
</head>

<body>
	<form method="post" action="update.php">
		<table>
			<tr>
				<td>English Name:</td>
				<td><input type="text" name="EnglishName" size="50" /></td>
				<td>Tel Number:</td>
				<td><input type="text" name="TelNumber" size="8" /></td>
			</tr>
			<tr>
				<td>Email Address:</td>
				<td><input type="text" name="EmailAddress" size="50" /></td>
				<td>Gender:</td>
				<td><input type="radio" name="Gender" value="M" checked="checked" />M<input type="radio" name="Gender" value="F" />F</td>
			</tr>
			<tr>
				<td>Age:</td>
				<td colspan="3">
					<input type="radio" name="Age" value="Under 18" checked="checked" />Under 18
					<input type="radio" name="Age" value="18-23" />18-23
					<input type="radio" name="Age" value="24-30" />24-30
					<input type="radio" name="Age" value="31-40" />31-40
					<input type="radio" name="Age" value="Over 40" />Over 40
				</td>
			</tr>
			<tr>
				<td>Region:</td>
				<td>
					<select name="Region">
						<option value="N/A">N/A</option>
						<option value="HK">Hong Kong</option>
						<option value="KLN">Kowloon</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="4"><input type="Submit" value="Submit" /></td>
			</tr>
		</table>
	</form>
</body>

</html>

Done =)

radio button IsChecked event not firing…

dotnettrails — Tue, 20 Oct 2009 05:16:26 +0000

This is widely discussed stuff in WPF 3.5 and quick fix is available here and here

Sam Bent of Microsoft clarifies that this issue is fixed in WPF 4.0 at here

input Checkbox or Radio button with runat server and checked property

praveen battula — Fri, 25 Sep 2009 06:21:31 +0000

input Checkbox or Radio button with runat server and checked property

Datagrid with ComboBox, Radio Button and Popup

todaystechnography — Mon, 07 Sep 2009 07:39:26 +0000

I googled out and could find hardly few examples in the area of embedding Radio Button Group inside Data grid.

So i thought let me share this with web friends.

This Flex control has following advantages

1. Radio Button Group inside Datagrid ( No need to write ItemRenderers )

2. Combo Box inside datagrid

3. Copy and Paste a row ( using Ctrl+C and Ctrl+V)

Radio Button inside Datagrid

Inside the data grid column, we have embedded our radio button as shown below

<mx:DataGridColumn dataField=”Economy” rendererIsEditor=”true” editorDataField=”selected” width=”350″>
    <mx:itemRenderer >
       <mx:Component>
       <mx:HBox horizontalAlign=”center”>
                <mx:RadioButtonGroup id=”rg” />
             <mx:RadioButton label=”Developed” groupName=”rg” value=”Developed” selected=”{‘Developed’ == data.Economy}” click=”checkRadioHandler(event)” />
             <mx:RadioButton label=”Developing” groupName=”rg” value=”Developing” selected=”{‘Developing’ == data.Economy}” click=”checkRadioHandler(event)”/>
             <mx:RadioButton label=”Under Developing” groupName=”rg” value=”Under Developing” selected=”{‘Under Developing’ == data.Economy}” click=”checkRadioHandler(event)”/>
       </mx:HBox>
           </mx:Component>
    </mx:itemRenderer>
   </mx:DataGridColumn>

Once we select any of the Radio Button, it has to update our Data Source. In order to do that, we have to use this code

<mx:Script>
         <![CDATA[
          import mx.controls.Alert;
             private function checkRadioHandler(event:Event):void {
                 var outObj:Object = event.currentTarget.parent.outerDocument;
                  var idx:uint = outObj.advDG.selectedIndex;
                  //Alert.show(" Radio button value = " + event.currentTarget.value);
                  outObj.orgData[idx].Economy = event.currentTarget.value;
                  //outObj. = event.currentTarget.value;
              }
         ]]>
</mx:Script>

Combo Box inside Datagrid

Similar to Radio Button, we are using a simple way to embed Combo Box inside our Datagrid

<mx:DataGridColumn dataField=”Climate” rendererIsEditor=”true” editorDataField=”value”>
           <mx:itemRenderer>
                <mx:Component >
                <mx:VBox horizontalAlign=”center”>
                  <mx:ComboBox change=”data.Climate = test.selectedItem” creationComplete=”getClimateData()” id=”test”
                 dataProvider=”{outerDocument.openClimateData}” prompt=”Select” />
                 </mx:VBox>
                </mx:Component>
           </mx:itemRenderer>
        </mx:DataGridColumn>See the Demo

Here in , if we select a value in our drop down, we have to update our Data Source to reflect this change.

<mx:Script>
      <![CDATA[
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;
      private function getClimateData():void {
       //Alert.show(" inside Script Climate = " + data.Country);
       //Alert.show(" inside Script Climate = " + data.Climate);

       for (var i:int=0;i<test.dataProvider.length;i++){
        var item:String = test.dataProvider[i];
        if (data.Climate != null) {
        if(item == data.Climate){
        test.selectedIndex = i;
        break;
          }
        } else {
        break;
        }
       }
       }
       ]]>
     </mx:Script>

Copy and paste

Copy a row using Ctrl+C and pasting a row using Ctrl+V inside datagrid. To enable this we have to use KeyboardEvent

See the Demo

Download Source Code

A mutually exclusive check box (radio button) in a repeating table/section

alecpojidaev — Wed, 26 Aug 2009 15:24:58 +0000

Bookmark that post

Clean XPath only solution. Browser forms OK.
The FORM to try.

Create following field/group structure:

Assign 0 as initial value to rStarter field. Assign following XPath expression as inital value to the ChBx field:

(../my:rStarter = xdMath:Max(../../my:CheckG/my:rStarter)) and (../my:rStarter != 0)

Create rule at ChBx field.
This rule has 2 actions:

Assign rStarter to 2 * (. != “false”)
Assign rStarter to 1 * (. != “false”)

Place control you like (check box or radio button) on the layout. For check box default “Value when cleared” to false and “Value when checked” to true. For radio button limit amount of choices to 1 and set “Value when selected” to true.

Thats it. Happy codeless programming!

P.S. Actually that form looks as potentially a good example to demonstrate field updating concepts like “push” and “pull” and how they are interrelate with each other. In particulary it would be interesting to explain why the sequence of operators like i=2; i=1; which have no sense in any language can be useful thing in Infopath. (Kind of a statement, eh? My only hope here is that people familiar with volatile variables concept and multithreading are not reading posts about InfoPath)

Thoughts on Radio Button Lists

rlb — Mon, 17 Aug 2009 18:08:15 +0000

In my own opinion, traditional radio button lists are becoming obsolete. And right fully so.

Radiobuttonlists have two qualities: They show all of the options, and they allow only one selection. Dropdowns allow one selection but are compact and slow. Consider that it takes two clicks to make a selection: one click to open the drop down, and another to select desired option. Checkboxes show all of their options as well, however by default functionality, allow multiple selections. We can programatically allow only one selection, but this is beside the point.

Radiobuttonlists are ugly, unasthetic, and a pain in the rear. There are some lists, but few, where you can click anywhere on the selection – text, bubble, or surrounding area, and it magically selects your item. However, for the majority, you have to find the item you would like to select by reading all of the items, locate the corresponding circular radio button, and then click with precision into the 12 x 12 pixel area. The selected choice is then distinguished with a tiny 8 x 8 black circle in the center. Not to mention, how does one ‘unselect’ a selection in a radio button list? Without special programming, you don’t.

Let’s consider the way the modern web works. Users have a short attention span, they don’t want to ‘do work’, and nor do they want to think about the work they are doing. The more intuitive, less work involving, and less work looking a web activity is, the more likely they are to complete it. Thus, we usually want small, compact forms for our users. Because, the less the user has to ‘do’, the more likely they will complete the task. The only exception to this rule is when we are emulating standards that have already been set – for example, an online poll is a vertical-itemized radiobutton list with a ’submit’ and ‘view results’ button. We don’t want to reinvent the wheel, but we can alter their training on a very similar, perhaps easier, wheel.

Take a look around at what alternate control sets are being pushed out onto the web, Survey Monkey, for example, has some great ideas. On-hover colored, and quite large, they are easy and intuitive to use.

checkbox, radio button validator

BlueSky — Wed, 06 May 2009 09:03:57 +0000

我竟然漏左post 呢個咁important 既post, 就係checkbox, radio button 既validator: 貼係header 度~~再用customer validator

Select Radio Button QTP

rajivkumarnandvani — Wed, 29 Apr 2009 16:14:43 +0000

Rem************************************************************************************** Rem This f

Making DW Radio Buttons and Check Boxes look disabled

rick130 — Tue, 17 Mar 2009 13:59:01 +0000

An effective GUI quickly communicates to the users how they can interact with the current window.

The checkbox and radio buttons in Firefox in Kubuntu 8.04 not rendered well when focused

abhishekbarua — Tue, 20 Jan 2009 17:02:50 +0000

The checkboxes and radio buttons in Firefox in Kubuntu 8.04 not rendered well when focused.

The solution to this is :

Open Konsole
sudo apt-get install human-theme gtk2-engines-murrine qtcurve gtk2-engines-qtcurve
sudo ln -s .gtkrc-2.0-kde .gtkrc-2.0

Open System settings -> Appearance -> GTK styles and fonts
In gtk styles, choose use another style and select qtcurve (this goes well with the default kubuntu theme)

Close System settings and open firefox.

Enjoy a better firefox in Kubuntu.

Ext-js de radio button

tafali — Mon, 29 Dec 2008 17:00:57 +0000

{
…
id: ’secenek1′,
…
}

Ext.get(’secenek1′).dom.checked seçiliyse true, değilse false oluyor.

if(Ext.get(’secenek0′).dom.checked) secenek = 0;
else if(Ext.get(’secenek1′).dom.checked) secenek = 1;

Radio Button Selection

baiju43 — Tue, 25 Nov 2008 12:49:09 +0000

The following code will help you to get the clicked radio button value inside a javascript function.The important thing is to give same values to the radio button’s name attribute….

<html>

function selectCountry(form, field) {

var chosen = “”;
var length = document.forms[form][field].length;

for (i=0;i<length;i++) {

if (document.forms[form][field][i].checked) {

chosen = document.forms[form][field][i].value;

if (chosen == “”) {

alert(“No Country Chosen”);

}
else {

alert(“Country Selected : ” + chosen);

}
}
}
}

</script>
<body>

<INPUT TYPE=”radio” NAME=”country” VALUE=”America”/>America<BR>
<INPUT TYPE=”radio” NAME=”country” VALUE=”Japan”/>Japan<BR>
<INPUT TYPE=”radio” NAME=”country” VALUE=”China”/>China<br>
<input type=”button” value=”Select” onclick=’selectCountry(“test”,”country”)’/>

</form>
</body>
</html>

Flex getting selected RadioButton value

Stephen Gray — Mon, 11 Aug 2008 11:21:33 +0000

This is a pretty simple one but there are surprisingly few tutorials showing the user simply how to get a selected RadioButtonGroup’s value.

There are quite a number of tutorials covering change event triggers for RadioButton controls but this is slightly different.

Say you have a form and you want to process the RadioButton value after submitting the form instead of when the value of it changes.

To do this you actually have to create a RadioButtonGroup MXML tag for the radio buttons and select the value using the ’selectedValue’ property of that RadioButtonGroup:

<mx:RadioButtonGroup id="myRadioButtonGroup" enabled="true" />
<mx:RadioButton label="I like RadioButtons" groupName="{myRadioButtonGroup}" left="505" top="64" selected="true" value="true"/>
<mx:RadioButton label="I don't like RadioButtons" groupName="{myRadioButtonGroup}" left="348" top="62" value="false"/>

Notice the {} around the groupName attributes of the RadioButton controls. You can then do this to select the value:

Alert.show(myRadioButtonGroup.selectedValue.toString());

Checkbox & Radio

myworldkvs — Fri, 18 Jul 2008 09:52:16 +0000

Javascript code for checking the Checkbox and Radio button whether checked or not.

Script Code:

var chk = document.form.checkboxname; // return Node list

for(var i=0;i<chk.length;i++)
{

if(chk[i].checked==true)

{

// do

}

// you can do this while reset

chk[i].checked=false;// make checked false
chk[i].disabled=false; // enable if you disbled already
}

Deselecting radio buttons in Flex

Joe — Fri, 11 Jul 2008 16:32:09 +0000

This is a simple tip to deselect radio buttons in flex. The trick here is to have radio buttons as part of a RadioButtonGroup. Then, you simply need to set your RadioButtonGroup.selection to null.

โปรดใช้ GUI Control ให้ถูกทาง

iamia — Mon, 07 Apr 2008 13:34:59 +0000

เมื่อก่อนตอนที่โลกเรายังแบ่ง Website กับ Application ชัดเจนกว่าตอนนี้ คนจะใช้ Website ในแบบเดินทางไปในเว็บไซต์ และอ่านเนื้อหาบนเว็บไซต์ ส่วน Application คนจะใช้ในการเปลี่ยนแปลง หรือประมวล กระทำบางสิ่งบางอย่างกับเนื้อหา หรือข้อมูล ผ่านทางชุดคำสั่ง โดยที่ตัวเอกของ Website คือ Link และตัวเอกของ Application คือ ฺMenu กับ Button

เมื่อสองสิ่งนี้เริ่มมารวมกันกลายเป็น Web Application ก็ยิ่งมีการผสมผสานของ GUI Control เพื่อให้เว็บทำหลายสิ่งหลายอย่างได้มากขึ้น อย่างเช่น แทนที่จะเป็นเว็บดูสินค้าเฉยๆ ก็มี Shopping Cart ขึ้นมา มีการคำนวณตรวจดูห้องว่างในโรงแรม จองตั๋วเครื่องบิน ค้นหาข้อมูลที่ต้องการ และอื่นๆอีกมากมาย เกินกว่าการที่โยงเนื้อหาไปมาบนหน้าเว็บหน้าต่างๆ

เมื่อเว็บ ทำอะไรได้มากขึ้น การใช้ GUI Control ก็มากขึ้น
รวมไปถึงการใช้ GUI Control ที่ผิดด้วย

ตัวอย่าง GUI-control ที่ผิดบ่อยๆ

Button
Button แต่ไหนแต่ไรก็จะเป็นการส่ง Action ที่จะกระทำต่อข้อมูล หรือการแสดงผล อย่างใดอย่างหนึ่ง โดยเรามักจะต้องกรอกข้อมูล หรือเลือก option บางอย่างก่อน แล้วเราถึงจะคลิก Button ยืนยันสิ่งที่เราเลือกไป เพื่อให้ระบบทำงานส่งผลออกมาอย่างที่เราต้องการ
แต่หลายๆที่ กลับใช้ Button เป็น Navigation ซึ่งจะทำให้ผู้ใช้สับสนได้ง่าย ว่านี่คือการยืนยัน Action หรือว่าเป็นแค่ Link เชื่อมโยงไปที่อื่น

Link
Link แบ่งเป็นสองอย่างตามการใช้งาน ได้แก่
Navigational Link คือ Link ที่พาไปยังจุดหมายที่กำหนดไว้ใน link นั้น
Command Link คือ Link ที่คลิกแล้วทำให้เกิด action บางอย่างบนเว็บ
ข้อเสียของการใช้ Command Link คือ หน้าตามันเหมือนกับ Navigational Link จนบางทีผู้ใช้สับสนว่า Link นี้เป็น Action หรือว่า Navigational กันแน่ ดังนั้น การกำหนด Label ของ Link จึงมีความสำคัญ ซึ่งต้องกำหนดให้ชัดเจนว่า Link นี้ คลิกแล้ว จะเกิดอะไรขึ้น
จากนั้น ควรจะใช้ Command Link กับ Action ย่อย แล้วให้ Button ทำหน้าที่ของมันไปสำหรับ Action หลัก เช่น เราอาจจะใช้ Command Link กับการหยิบของใส่ตะกร้าก็ได้ แต่เมื่อเป็น Action หลัก เช่น การยืนยันการซื้อ ก็ควรจะเป็น Button

Checkbox
Checkbox คือช่องสี่เหลี่ยมที่ให้คลิกเพื่อเลือก
เราจะสามารถเลือกตัวเลือกได้ตั้งแต่ไม่เลือกเลย
จนไปถึงเท่ากับจำนวนตัวเลือกที่มี
และเราใช้ Stand-alone Checkbox ในการเลือกตัวเลือกที่มีเพียง 2 ตัวเลือกตรงข้ามกันได้อย่างมีประสิทธิภาพ เช่น Yes/No, Active/Inactive, Visible/Invisible เป็นต้น

Radio Button
Radio Button คือช่องกลมๆที่ให้คลิกเพื่อเลือก เช่นกัน
แต่มันมีความแตกต่างในการใช้งานกับ Checkbox อย่างชัดเจน
เราใช้ Radio Button เพื่อบังคับเลือกเพียงตัวเลือกเดียว
ไม่ว่าจะมีจำนวนตัวเลือกเท่าไร ก็เลือกได้เพียงตัวเดียวเท่านั้น
หรือถ้ามีตัวเลือกเพียง 2 ตัว แต่เป็นตัวเลือกที่ไม่ได้มีลักษณะตรงข้ามกัน เช่น
ให้เลือกสี เลือกเพศ ช่วงอายุ และข้อมูลต่างๆที่ต้องการคำตอบจากผู้ใช้เพียงคำตอบเดียว

แต่ในบางเว็บ แทนที่จะใช้ตาม Behavior เดิมๆของมัน ก็ต้องไปโปรแกรมเพิ่มให้มันมี Behavior ที่ผิดแผกไป เช่น ใช้ Checkbox แต่ทำให้มันมี Behavior เหมือน Radio Button
ใช้ Radio Button แต่ทำให้มันมี Behavior เหมือน Checkbox

Dropdown
Dropdown คือแถบที่มีสามเหลี่ยมคว่ำ กดออกมาเพื่อดูและเลือกตัวเลือกทั้งหมด
Behavior เหมือน Radio Button เด๊ะ
ข้อดีของมันคือ ประหยัดพื้นที่ ถ้ามีตัวเลือกเป็นจำนวนมาก
แต่ข้อเสียคือ ถ้าใช้ไม่เหมาะ เช่น ตัวเลือกน้อยๆก็ยังจะใช้ จะทำให้ผู้ใช้เสียเวลาเลือกตัวเลือก
มากกว่า Radio Button

และมีข้อควรระวังในการใช้ Javascript หรือ AJAX ซึ่งต้องดูที่สถานการณ์ด้วย บางสถานการณ์ ผู้ใช้ไม่ได้คาดไว้ว่า เมื่อเปลี่ยนตัวเลือกแล้ว หน้าเว็บจะเปลี่ยนทันที บางสถานการณ์ การมี Button เพื่อยืนยันการเปลี่ยนแปลงตัวเลือก จึงเป็นสิ่งที่จำเป็นอยู่

เหล่านี้ เป็นตัวอย่าง GUI control พื้นฐาน
ที่เราควรใช้ให้ถูกธรรมชาติของมัน
อย่างไรก็ดี มาถึงสมัยที่เว็บเป็น Rich Internet Application เช่นนี้
ไม่ว่าจะเป็น Air, Flash, หรือ Silverlight
ซึ่งเราสามารถออกแบบและสร้าง GUI control ได้ด้วยตัวเอง
บางทีนักออกแบบก็มันมือ จนอาจจะทำให้เกิดปัญหาบางอย่างตามมา เช่น

Non-Standard GUI Control
คือนอกเหนือจาก GUI Control พื้นฐานแล้ว
ยังออกแบบ Control ตามความคิดสร้างสรรค์ของตัวเองได้อีกด้วย
ซึ่งมันจะเกิดเป็นปัญหาขึ้น เมื่อผู้ใช้ไม่เก็ตตามผู้ออกแบบว่า
Control นั้นๆ ใช้ทำอะไร

ดูเหมือนจะเป็น GUI-Control ปรกติ แต่ไม่ใช่ซะงั้น
อย่างที่บอกไปว่า บางที่ก็ไม่พอใจ Behavior ดั้งเดิมของ Control นั้นๆ
ก็ไปเปลี่ยนแปลงมันซะให้ใช้ยากขึ้นซะงั้น
หรือทำกราฟฟิกปรกติ ให้ไปเหมือน Control ใด Control หนึ่ง
ที่เจอเป็นปรกติมากเลยคือ ชอบออกแบบให้ Header หรือ Topic มันเหมือน Button
ซึ่งคนในทีมเองเทสต์เองยังเข้าใจผิดว่าเป็น Button เลย
ตรงนี้ เรียกว่า เป็นการใช้ Perceived Affordance ของ GUI-control ที่ผิด
พูดง่ายๆก็คือ มันไม่เป็นไปตามที่หวังว่ามันจะเป็น
ทำให้เกิดความสับสนในการใช้งานได้ง่าย

ปัญหาสามัญประจำออฟฟิศนักพัฒนาอีกอันหนึ่งคือ Inconsistency
คือความไม่สม่ำเสมอของ GUI
มักจะเกิดกับโปรเจคที่เริ่มใหญ่ไปถึงใหญ่จริง
เดี๋ยวหน้านี้เป็น Button เดี๋ยวหน้านั้นเป็น Command Link ทั้งที่ function เดียวกันแท้ๆ
เดี๋ยว Link ด้านบน underline แต่ข้างล่างไม่ underline
กลายเป็นเว็บไซต์วัดไอคิวกันไปหมด
ฉะนั้น การมี CSS plan ควบคุมและวางแผนตั้งแต่ต้น จึงเป็นสิ่งที่ต้องให้ความสนใจมาก

จริงๆยังมีอีกหลายปัญหาสามัญประจำทีม
ที่จะเอาไว้พูดคุยกันต่องานหน้าก็แล้วกัน
วันนี้ขอเอาหน้าเว็บยื่นภาษีออนไลน์มาเม้านิดนึง

นี้คือ Landing Page ที่จะเข้าสู่การยื่นภาษี

มองไป มองมา หาที่ยื่นไม่เจอ – -”
ยื่นภาษีตรงไหน ช่วยด้วย

ก็เลยต้องอ่านรายละเอียดทุกบรรทัด
เพื่อให้เห็นว่า อ้อ link ไปที่ยื่นภาษีมันคืออันนี้นี่เอง
ทั้งๆที่การไปยื่นภาษีออนไลน์ น่าจะเป็น Activity หลักของเว็บ
แต่กลับหาทางเข้า At a glance ไม่ได้
ทำให้ผู้ใช้ต้องมาเสียเวลานั่งอ่านรายละเอียดที่ไม่เกี่ยวข้อง

พอดั้นด้น กรอกข้อมูลส่วนตัวเรียบร้อยแล้วเข้ามาถึงหน้ากรอกตัวเลข ดังนี้

ดูเผินๆ ก็ไม่มีอะไรใช่ไหม
ก็เป็นฟอร์มธรรมดา

มันเกิดความสับสนให้กับผู้ใช้เหมือนกัน
ในกรณีที่อิฉันกรอกไปแล้วว่าเป็นสาวโสดโฉดหมวย
แต่เมื่อมาถึงหน้านี้ ช่อง”คู่สมรส” แถบขวาทั้งแถบ
บวกกับช่องคู่สมรสในมาตรา 40(2) ก็โผล่มาให้มึนตึ้บเล่นๆ
เอ๊ะ บอกว่าโสดไง หรือว่าฉันไปแต่งงานกับใครไว้แล้วลืมไปหว่า
มันทำให้เกิดการ Overwhelm ทางด้านข้อมูล
แทนที่ผู้ใช้จะงงภาษีและรายได้ของตัวเองมาก่อนหน้านี้แล้ว
ระบบก็ยังไม่เห็นใจ ยังทำให้ผู้เสียภาษีต้องงงต่อไปอีก

ต่อมา มีการ mix ช่องที่ผู้ใช้อาจ expect ว่าเป็น text only
กลายเป็นบางข้อมี GUI control โผล่ขึ้นมา
อย่างเช่น Radio Button ซึ่งบางข้อ ก็ไม่ให้ผู้ใช้เลือกได้อีก
ถึงแม้ช่องที่ผู้ใช้เลือกไม่ได้จะทำเป็นตัวเทา
แต่นั่นก็ยังดูแปลก เพราะ Control เหล่านี้
ผู้ใช้มักจะเข้าใจว่าเลือกได้ตลอด
เพราะจากประสบการณ์การใช้งาน การเรียนรู้มันบอกว่างั้น
พอมายื่นภาษีออนไลน์ที ต้องเรียนรู้ใหม่เกือบหมดเลยซะนี่

สุดท้าย ถ้าเห็นเป็นแบบฟอร์มธรรมดา
พอกรอกลงมาจนถึงด้านล่างเสร็จแล้วปุ๊บ
ผู้ใช้ก็จะหวังว่าจะได้กด “ต่อไป” หรือ “จบ” เพื่อไปยัง step ต่อไป
อันนี้เป็นพื้นฐานในการกรอกฟอร์ม
แต่เมื่อเลื่อนลงมาถึงด้านล่างจริงๆ กลับต้องงงเป็นไก่ตาแตก
เมื่อมีแต่ Button ไล่ให้กลับไปหน้าแรก ให้ล้างข้อความให้หมด
แล้วก็ให้ยกเลิกการยื่นภาษี

นั่งงงอยู่อึดใจ แล้วถ้าฉันยื่นภาษีต่อ ฉันต้องกดปุ่มไหน
แล้วก็ทำตัวไม่มีเหตุผลไปสักพัก
ถึงจะบางอ้อว่า เง้ย สงสัยมันต้องกดตรงแถบๆฟ้าๆข้างบนนี่แน่ๆเลย

นั่นหมายความว่า Flow ของการทำงาน ถูกขัดขวางด้วยการวางตัวของ Interface
เมื่อผู้ใช้ต้องกรอกข้อมูลลงมาถึงข้างล่างสุด
action ต่อไปต้องมีรองรับไว้ คือการเดินหน้าไปยังขั้นตอนต่อไป
แต่นี่ กรอกเสร็จก็มีแต่ตัวเลือกให้ตัดสินใจถอยหลัง
แปลว่า Flow มันต้องไหลย้อนกลับขึ้นไปด้านบน
ก็งงกันล่ะงานนี้
โอเค ติ๊ต่างว่า เราฉลาดแล้ว เลยไต่กลับขึ้นไปที่หน้าเว็บด้านบน
เมนูฟ้าๆด้านบน เห็นแล้วคนที่กรอกภาษีปีละครั้งอย่างเรา ก็เหนื่อยใจ

ความดีของ Menu อันนี้ เห็นจะเป็นอย่างเดียวก็คือ
มันยังอุตส่าห์ highlight ว่า ตอนนี้เราอยู่ที่หน้าไหน

แต่การออกแบบ interface นั้น ไม่ได้สื่อเลยว่า
ต้องทำไปตามขั้นตอนนี้ หรือห้ามข้ามขั้นตอนไหน
interface มีลักษณะเป็น Tab ซึ่งโดยตัวของมัน
มักจะใช้กับการเลือกหน้าได้โดยอิสระ ไม่มีหน้าใดผูกกับหน้าใดเป็นพิเศษ
ไม่ Afford ให้ผู้ใช้รับรู้ว่า Tab ใดเป็น Tab ที่จำเป็นต้องคลิก
ไม่มีอะไรบอกว่า ต้องกรอกข้อมูลใน Tab ผู้จ่ายเงินได้ ก่อนถึงจะยื่นภาษีได้
หรือแม้แต่ไม่มีอะไรที่บ่งบอกว่า ต้องกด Tab สรุปภาษี ถึงจะยื่นภาษีได้

ทำไมชีวิตมันถึงได้ยากเย็นยิ่งนัก
อีกอย่างก็คือ การแปะ Label ของ Tab นั้น
เป็น Label ภาษากรมสรรพากร ซึ่งไม่ใช่ภาษาของประชาชนทั่วไป
แปลว่า คนที่จะมากรอกภาษีได้ ต้องไปอ่านมาก่อนว่า
เงินได้ 40(1)(2) คืออะไร
เงินได้ 40(3) คืออะไร
เงินได้ 40(6) คืออะไร
ถ้าไม่รู้ว่าอะไร ก็ต้องคลิกดูอีกทีว่า ต้องมีอะไรกรอกหรือเปล่า
ทำให้เสียเวลาทำมาหาเงินมาเสียภาษีโดยใช่เหตุ

ซึ่งทำให้ Interface ที่คาดว่าตอนสร้างขึ้นมา
คงคิดว่าแบ่งเป็น Tab แล้วจะใช้งานง่ายดี
แต่…มันไม่ใช่อะกิ๊บ…

นี่ก็เป็นอีกตัวอย่างที่แสดงให้เห็นว่า
ข้อมูลที่ไม่เกี่ยวข้อง ช่องที่ไม่เกี่ยวข้อง อยู่ในแบบฟอร์มมากเกินไป

อย่างเช่นในรูป มาตรา 40(1) ใส่เงินเดือนเข้าไปแล้ว
เมื่อหักเงินได้ที่ได้รับการยกเว้นกรณีเป็นผู้สูงอายุ
(ทำไมมันคำนวณจากข้อมูลส่วนตัวไม่ได้ฟะว่าอิฉันสูงอายุพอหรือไม่พอ)
มันก็จะคงเหลือเงินที่นำไปคำนวณภาษี เท่านั้นเท่านี้
แต่ตรงช่อง “คงเหลือ” เนี่ย มันเกี่ยวข้องกับ textbox เงินรายได้ในช่องซ้ายสุดเท่านั้น
ช่องขวาถัดมาไม่ได้เกี่ยวอะไรกับเขาเลย ก็ยังขอแจมปรากฏซะหน่อย

เพื่ออะไร – -”
เข้าใจในความยากของระบบระเบียบการจัดเก็บภาษีเหมือนกัน
เขาคงพยายามแล้ว เราก็ต้องพยายามต่อไปของเราเหมือนกัน
ขออย่างเดียว อย่าโดนเก็บภาษีเพิ่มอีกเลย ฮือๆๆ

ป.ล.
ยื่นภาษีปีหน้าคงต้องมาเปิดดูบทความนี้ใหม่
อิงจาก
http://www.useit.com/alertbox/application-mistakes.html
http://www.useit.com/alertbox/command-links.html
http://www.useit.com/alertbox/20040927.html
http://www.useit.com/alertbox/20050711.html
http://www.rd.go.th/