Munu
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
Name
Email Address:
Feedback:
Sex: Male: Female:
Hobbies: Tennis
Reading
Basketball
Agree to Terms?
อีกตัวอย่าง สวยๆ ค่ะ
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
Name
Add your name
Email
Add a valid address
Password
Min. size 6 chars
Sign-up
