การเขียน Webpage ด้วย CSS : Form

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

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

ตัวอย่าง- 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>

ผลลัพธ์

ตัวอย่าง- 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>

ผลลัพธ์

ตัวอย่าง- 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>

ผลลัพธ์

หัวข้อ

ตัวอย่าง- 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 ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะ

ตัวอย่าง

<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>

ผลลัพธ์

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

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

ตัวอย่าง

<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>

ผลลัพธ์

การเขียน Webpage ด้วย CSS

ads by google

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Form

Sign-up form