โดย GoB » 02/02/2015 11:43 am
CSS การสร้างฟอร์มสำหรับรับค่าข้อมูล
เราสามารถกำหนดความกว้าง รวมถึงกำหนดสี ของกล่องรับค่า (Input) ซึ่งจะช่วยให้เว็บดูมีสีสัน และมีความเป็นระเบียบ ดูได้ง่ายมากขึ้น
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
input[type=text] {
width: 150px; //ความกว้างของช่องรับค่า
display: block; //แสดงผลเป็นลักษณะกล่อง ขึ้นบรรทัดใหม่
margin-bottom: 10px; //ระยะห่างของช่องรับค่า
background-color: yellow; //สีพื้นหลังในช่อง
}
input[type=button] { //กำหนดรูปแบบของปุ่ม Button
width: 120px; //ความกว้าง
display: block; //แสดงผลเป็นลักษณะกล่อง ขึ้นบรรทัดใหม่
}
</style>
</head>
<body>
<form name="input" action="" method="get"> //กำหนดว่าจะส่งค่าไปที่ไฟล์ไหน
รหัสสินค้า :<input type="text" name="Name">
ชื่อสินค้า :<input type="text" name="Name" >
<input type="button" value="บันทึกข้อมูล">
</form>
</body>
</html>
ผลลัพธ์ที่ได้
*****************************************************************
- 1.jpg (10.82 KiB) Viewed 980 times
[b][size=150][color=#0000FF]CSS การสร้างฟอร์มสำหรับรับค่าข้อมูล[/color][/size][/b]
[b]เราสามารถกำหนดความกว้าง รวมถึงกำหนดสี ของกล่องรับค่า (Input) ซึ่งจะช่วยให้เว็บดูมีสีสัน และมีความเป็นระเบียบ ดูได้ง่ายมากขึ้น [/b]
[code]<html>
<head>
<style>
input[type=text] {
width: 150px; //ความกว้างของช่องรับค่า
display: block; //แสดงผลเป็นลักษณะกล่อง ขึ้นบรรทัดใหม่
margin-bottom: 10px; //ระยะห่างของช่องรับค่า
background-color: yellow; //สีพื้นหลังในช่อง
}
input[type=button] { //กำหนดรูปแบบของปุ่ม Button
width: 120px; //ความกว้าง
display: block; //แสดงผลเป็นลักษณะกล่อง ขึ้นบรรทัดใหม่
}
</style>
</head>
<body>
<form name="input" action="" method="get"> //กำหนดว่าจะส่งค่าไปที่ไฟล์ไหน
รหัสสินค้า :<input type="text" name="Name">
ชื่อสินค้า :<input type="text" name="Name" >
<input type="button" value="บันทึกข้อมูล">
</form>
</body>
</html>[/code]
[b][color=#0000FF]ผลลัพธ์ที่ได้
*****************************************************************[/color][/b]
[attachment=0]1.jpg[/attachment]