คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 19

Form

เรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำ Form โดยไม่ใช้ Table หรือเรียกว่า Tableless Form

Form Elements
เราสามารถตกแต่ง ส่วนประกอบของ Form ได้แก่ inputbox, textarea, button เป็นต้น ให้มีสีสันที่สวยงามได้ ไปดูตัวอย่างกันค่ะ



Example - Text box
<html>
<head>
<style type="text/css">
.textbox_gray {
color:#55555;
background-color:#FFFFFF;
border:1px solid #999999;
}

.textbox_yellow {
text-align:center;
color:#55555;
background-color:#FAFCD1;
border:1px solid #999999;
}

.textbox_image{
color:#55555;
background-image: url(../images/bg.png);
border: 1px solid #999999;
}

.textbox_imgside {
font-family: Tahoma, "ms sans Serif";
font-size:12px;
color:#0033CC;
background-image: url(../images/mail.gif);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #3366CC;
padding-left:16px;
}
</style>
</head>

<body>
<input type="text" size="30" value="enjoyday.net" /> <br><br>
<input type="text" size="30" class="textbox_gray" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_yellow" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_image" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_imgside" value="admin@enjoyday.net" />
</body>
</html>
Output








การตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20

Example - Textarea

<html>
<head>
<style type="text/css">

.textarea1 {
scrollbar-arrow-color:#000;
scrollbar-face-color:#face00;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#face00;
scrollbar-darkshadow-color:#000;
border:1px solid #000;
font-size:12px
}

.textarea2 {
scrollbar-arrow-color:#000;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#000;
color:#000;
border:1px solid #000000;
font-size:12px
}

.textarea3 {
scrollbar-arrow-color:#add8e6;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#add8e6;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#add8e6;
color:#197bff;
border:1px solid #add8e6;
font-size:12px
}

.textarea4 {
scrollbar-arrow-color:#ffb090;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#ffb090;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#ffb090;
color:#ff4a19;
border:1px solid #ffb090;
font-size:12px
}
</style>
</head>
<body>
<textarea rows="4" cols="20" class="textarea1">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>

<textarea rows="4" cols="20" class="textarea2">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>

<br />

<textarea rows="4" cols="20" class="textarea3">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>

<textarea rows="4" cols="20" class="textarea4">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>


</body>
</html>

 

Output


Example - Textarea

<html>
<head>
<style type="text/css">

.textarea_a {
width:300px;
scrollbar-arrow-color:#000;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
color:#000;
border:1px solid #000;
font-size:12px
}

.textarea_b {
width:300px;
scrollbar-arrow-color:#000;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
color:#000;
border-width:0;
font-size:12px
}

.textarea_c {
width:300px;
scrollbar-arrow-color:#ff6699;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
color:#ff6699;
border-width:0;
font-size:12px
}
</head>

<body>
<div style="border:1px solid #000; background:#add8e6; padding:5px; width:310px">
<textarea rows="4" class="textarea_a">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>
</div>

<br />

<div style="border:1px solid #000;background:#fff;padding:4px; width:320px">
<div style="border:1px solid #000;margin-bottom:4px">
<div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px">หัวข้อ</div>
</div>
<textarea rows="5" class="textarea_b">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>
</div>

<br />

<div style="border:1px solid #ff6699; width:320px">
<div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px">
<div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb">
<div style="border:1px solid #ff6699;background:#fff;padding:2px">
<textarea rows="5" class="textarea_c">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>
</div>
</div>
</div>
</div>


</body>
</html>

Output

หัวข้อ


Example - Button
<html>
<head>
<style type="text/css">

.button_gray {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333333;
background-color:#F7F7F7;
border: 1px solid #000000;
padding: 1px 0;
}

.button_image {
font-family:Arial, Helvetica, sans-serif;
color:#333333;
background: url(images/button_bg.gif) repeat-x;
border: 1px solid #000000;
padding: 1px 0;
}
</style> </head>
<body> <input type="button" value="Submit" class="button_gray">
<input type="button" value="Submit" class="button_image">
</body>
</html>
Output

รูปที่ใช้ทำปุ่ม



Tableless Form
เราสามารถกำหนด Form เป็น 2 column โดยไม่ต้องใช้ Table ได้ โดยกำหนดความกว้างของ column แรกโดยใช้ tag <label> และ colunm ที่สอง จะเป็นพวก text box ที่วางต่อจาก column แรก

credit to : http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

ลองนำ code ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะ

Example

<html>
<head>
<style type="text/css">

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

</style>
</head>

<body>
<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>
</form>

</body>
</html>

Output

Male: Female:

Tennis
Reading
Basketball



อีกตัวอย่าง สวยๆ ค่ะ

Credit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

Example

<html>
<head>
<style type="text/css">

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

</style>
</head>

<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<button type="submit">Sign-up</button>
<div class="spacer"></div>

</form>
</div>

</body>
</html>

Output

Sign-up form

This is the basic look of my form without table

« Chapter 18
Chapter 20 »