วิธีการปรับขยายช่อง textbox เมื่อมีการ focus เพื่อจะเพื่อที่จะประหยัดพื้นที่หน้าเว็บเวลาไม่ได้ใช้งาน textbox

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5163
Joined: 19/09/2018 10:33 am

วิธีการปรับขยายช่อง textbox เมื่อมีการ focus เพื่อจะเพื่อที่จะประหยัดพื้นที่หน้าเว็บเวลาไม่ได้ใช้งาน textbox

Post by Ittichai_chupol »

ความสวยงามหน้าหน้าเว๋็บไซต์ ถือว่าเป็นส่วนหนึ่งที่ทำให้ผู้ที่เข้ามาใช้งานเกิดความประทับใจ และเพิ่มอัตราการอยากเข้ามาใช้งาน แต่ทั้งนี้ก็จะต้องมีความเหมาะสมต่อลักษณะการของเว็บไซต์ด้วยว่าเป็บเว็บไซต์ที่จะมีไว้สำหรัยบใครเป็นผู้ใช้งาน ซึงถึงว่าเป้นส่วนาสำคัญสำหรับผู้ที่พัฒนาเว็บไซต์ว่า จะพัฒนามาเพื่อใช้ทำอะไรบาง
โดยในบางครั่งนอกจากความสวยงามแล้ว ผู้ที่พัฒนา ก็อาจจะมีมีการแฝงลูกเล่นเล็กน้อยๆ เพื่อสะดวกต่อการใช้งาน หรือ เพื่อสร้างความประทับต่อผู้ใช้งาน ซึ่งการที่จะทำแบบนั้นได้ ผู้ที่พัฒนาเว็บไซต์ ก็ย่อมมีความเข้าใจต่อคุณสมบัติ และวิธีการใช้งานภาษาคอมพิวเตอร์ ที่จะใช้ในการพัฒนา

โดยทัวไป ภาษาที่จะใช้แสดงผลให้ผู้ใช้งานได้เห็นทางหน้าจอนั้น ก็คือ HTML แต่ภาษาที่จะเข้ามาช่วยให้ html มีความหน้าเข้ามาใช้งานหรือมีความสวยงามนั้นก็คื css แต่ถ้าหากเป็นเว็บไซต์ที่จะต้องมีการเก็บข้อมูล แล้วนำข้อมูลเหล่านั้นมาใช้งาน ก็จะต้องมี PHP Python หรืออื่นๆ เข้ามาพัฒนา แต่ถ้าหากผู้พัฒนาอยากจะทำให้เว็บมีความสะดวกมากยิ่งขึ้น หรือ มีลูกเล่นเพื่อความสวยงาม เพิ่มความประทับใจ และง่ายต่อการเรียกใช้ข้อมูลในบางกรณี ก็อาจจะใช้ Jquery javascript หรืออื่นๆเข้ามาช่วย

แต่ทั้งนี้ในบางครั้งการเพิ่มลูกเล่นนั้นก็อาจจะไม่จำเป็นต้องใช้ Jquery มาช่วยเสริม แต่อาจจะจะใช่เพียงแค่ css อย่างเดียวก็ได้ ดังตัวอย่างนี้ คือการเพิ่มขนาดช่อง textbox กรณีที่ผู้ใช้งานต้องการจะกรอกข้อมูล ซึ่งจะมีขนาดกว้างขึ้น โดยวิธีการก็มีดังนี้


1.ตัวอย่างโคด HTML ซึ่งส่วนี้จะเป็นเพียงแค่หน้า form ให้ผู้ใช้งานได้เห็น

Code: Select all


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

Code: Select all

<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>
ผลลัพธ์ที่ได้
ezgif.com-video-to-gif (7).gif
ezgif.com-video-to-gif (7).gif (14.39 KiB) Viewed 377 times
บทความที่เกี่ยวข้อง

CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ
私を傷つけるすべてが終了します。

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest