วิธีการปรับขยายช่อง textbox เมื่อมีการ focus เพื่อจะเพื่อที่จะประหยัดพื้นที่หน้าเว็บเวลาไม่ได้ใช้งาน textbox
โพสต์แล้ว: 29/11/2019 2:47 pm
ความสวยงามหน้าหน้าเว๋็บไซต์ ถือว่าเป็นส่วนหนึ่งที่ทำให้ผู้ที่เข้ามาใช้งานเกิดความประทับใจ และเพิ่มอัตราการอยากเข้ามาใช้งาน แต่ทั้งนี้ก็จะต้องมีความเหมาะสมต่อลักษณะการของเว็บไซต์ด้วยว่าเป็บเว็บไซต์ที่จะมีไว้สำหรัยบใครเป็นผู้ใช้งาน ซึงถึงว่าเป้นส่วนาสำคัญสำหรับผู้ที่พัฒนาเว็บไซต์ว่า จะพัฒนามาเพื่อใช้ทำอะไรบาง
โดยในบางครั่งนอกจากความสวยงามแล้ว ผู้ที่พัฒนา ก็อาจจะมีมีการแฝงลูกเล่นเล็กน้อยๆ เพื่อสะดวกต่อการใช้งาน หรือ เพื่อสร้างความประทับต่อผู้ใช้งาน ซึ่งการที่จะทำแบบนั้นได้ ผู้ที่พัฒนาเว็บไซต์ ก็ย่อมมีความเข้าใจต่อคุณสมบัติ และวิธีการใช้งานภาษาคอมพิวเตอร์ ที่จะใช้ในการพัฒนา
โดยทัวไป ภาษาที่จะใช้แสดงผลให้ผู้ใช้งานได้เห็นทางหน้าจอนั้น ก็คือ HTML แต่ภาษาที่จะเข้ามาช่วยให้ html มีความหน้าเข้ามาใช้งานหรือมีความสวยงามนั้นก็คื css แต่ถ้าหากเป็นเว็บไซต์ที่จะต้องมีการเก็บข้อมูล แล้วนำข้อมูลเหล่านั้นมาใช้งาน ก็จะต้องมี PHP Python หรืออื่นๆ เข้ามาพัฒนา แต่ถ้าหากผู้พัฒนาอยากจะทำให้เว็บมีความสะดวกมากยิ่งขึ้น หรือ มีลูกเล่นเพื่อความสวยงาม เพิ่มความประทับใจ และง่ายต่อการเรียกใช้ข้อมูลในบางกรณี ก็อาจจะใช้ Jquery javascript หรืออื่นๆเข้ามาช่วย
แต่ทั้งนี้ในบางครั้งการเพิ่มลูกเล่นนั้นก็อาจจะไม่จำเป็นต้องใช้ Jquery มาช่วยเสริม แต่อาจจะจะใช่เพียงแค่ css อย่างเดียวก็ได้ ดังตัวอย่างนี้ คือการเพิ่มขนาดช่อง textbox กรณีที่ผู้ใช้งานต้องการจะกรอกข้อมูล ซึ่งจะมีขนาดกว้างขึ้น โดยวิธีการก็มีดังนี้
1.ตัวอย่างโคด HTML ซึ่งส่วนี้จะเป็นเพียงแค่หน้า form ให้ผู้ใช้งานได้เห็น
2.ตัวอย่างโคด CSS จะเป็นส่วนที่จะเพิ่มความส่วนงามให้กับ เเละลูกเล่นๆให้กับ html
ผลลัพธ์ที่ได้
บทความที่เกี่ยวข้อง
CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ
โดยในบางครั่งนอกจากความสวยงามแล้ว ผู้ที่พัฒนา ก็อาจจะมีมีการแฝงลูกเล่นเล็กน้อยๆ เพื่อสะดวกต่อการใช้งาน หรือ เพื่อสร้างความประทับต่อผู้ใช้งาน ซึ่งการที่จะทำแบบนั้นได้ ผู้ที่พัฒนาเว็บไซต์ ก็ย่อมมีความเข้าใจต่อคุณสมบัติ และวิธีการใช้งานภาษาคอมพิวเตอร์ ที่จะใช้ในการพัฒนา
โดยทัวไป ภาษาที่จะใช้แสดงผลให้ผู้ใช้งานได้เห็นทางหน้าจอนั้น ก็คือ HTML แต่ภาษาที่จะเข้ามาช่วยให้ html มีความหน้าเข้ามาใช้งานหรือมีความสวยงามนั้นก็คื css แต่ถ้าหากเป็นเว็บไซต์ที่จะต้องมีการเก็บข้อมูล แล้วนำข้อมูลเหล่านั้นมาใช้งาน ก็จะต้องมี PHP Python หรืออื่นๆ เข้ามาพัฒนา แต่ถ้าหากผู้พัฒนาอยากจะทำให้เว็บมีความสะดวกมากยิ่งขึ้น หรือ มีลูกเล่นเพื่อความสวยงาม เพิ่มความประทับใจ และง่ายต่อการเรียกใช้ข้อมูลในบางกรณี ก็อาจจะใช้ Jquery javascript หรืออื่นๆเข้ามาช่วย
แต่ทั้งนี้ในบางครั้งการเพิ่มลูกเล่นนั้นก็อาจจะไม่จำเป็นต้องใช้ Jquery มาช่วยเสริม แต่อาจจะจะใช่เพียงแค่ css อย่างเดียวก็ได้ ดังตัวอย่างนี้ คือการเพิ่มขนาดช่อง textbox กรณีที่ผู้ใช้งานต้องการจะกรอกข้อมูล ซึ่งจะมีขนาดกว้างขึ้น โดยวิธีการก็มีดังนี้
1.ตัวอย่างโคด HTML ซึ่งส่วนี้จะเป็นเพียงแค่หน้า form ให้ผู้ใช้งานได้เห็น
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
-- จะเรียกใช้ ตัวอย่าง โคดจาก ข้อ 2
<body>
<center>
<div>
<form action="">
<label for="fname">Input Data</label><br>
<input type="text" id="fname" name="firstname" placeholder="Input data.."><br>
<input type="submit" value="Submit">
</form>
</div>
</center>
</body>
</html>
2.ตัวอย่างโคด CSS จะเป็นส่วนที่จะเพิ่มความส่วนงามให้กับ เเละลูกเล่นๆให้กับ html
โค้ด: เลือกทั้งหมด
<style>
// เป็นการเพิ่มสีสัน ปรับลักษณะให้กับ ปุ่ม
input[type=submit] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
//ส่วนนีจะทำงานเหมื่อมีการคลิกที่ช่องกรอกข้อมูล
input[type=text]:focus {
width: 80%;
border: 2px solid #0099CC;
}
//ส่วนที่เป็นกรอบครอบส่วนการแสดงผลทั้งหมด
div {
border-radius: 5px;
background-color: #CCFF66;
padding: 20px;
width: 300px
}
</style>
บทความที่เกี่ยวข้อง
CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ