CSS การสร้างฟอร์มสำหรับรับค่าข้อมูล

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: CSS การสร้างฟอร์มสำหรับรับค่าข้อมูล

CSS การสร้างฟอร์มสำหรับรับค่าข้อมูล

โดย 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
1.jpg (10.82 KiB) Viewed 980 times

ข้างบน