วันนี้เราจะมาคุยถึงเคล็ดลับของ HTML ที่คุณอาจไม่เคยรู้ (หรือเคยรู้) มาก่อนกัน 😵
Capture attribute ใน input
รู้หรือไม่เพียงแค่คำสั่ง input type file ก็สามารถสั่งเปิดกล้องในมือถือได้ด้วย capture attribute โดย attribute นี้จะมี 2 value คือ user กับ environment ในส่วนของ action ก็ตรงตัวตามคำสั่งเลยค่ะนั่นก็คือ user จะหมายถึง กล้องหน้า ส่วน environment จะหมายถึงกล้องหลัง
<input type="file" capture="user" accept="image/*">
//สั่งเปิดกล้องหน้าเลือกถ่ายเป็นภาพนิ่ง รองรับไฟล์ภาพทุกนามสกุล
<input type="file" capture="environment" accept="video/*">
//สั่งเปิดกล่องหลังเลือกถ่าย video รองรับไฟล์วีดีโอทุกนามสกุลและเมื่อดูจาก caniuse.com จะพบว่าสามารถใช้ใน mobile ทุก browser เลยค่ะ 👍
ถ้าใช้บน pc จะเป็นการ browse file ตามปกติค่ะ
เลือก file type ที่ต้องการให้ upload
ยังคงอยู่ที่ input type file โดยที่เราสามารถเลือกประเภท file ที่ต้องการให้ user upload ได้ด้วย accept attribute นั่นเองค่ะ ถ้าสังเกตปกติเวลากด browse file เราจะสามารถกดเลือก file ได้ทุกประเภทเลย ตั้งแต่ .jpg, .zip ไปจนถึง .pdf และหากเราต้องการให้ user upload ภาพเท่านั้น มันก็อาจจะสร้างความไม่สะดวกให้กับ user การใช้ accept attribute จึงจำเป็นต่อสิ่งนี้ค่ะ
<input type="file" id="imageFile" accept="image/*" />
//รองรับไฟล์ภาพทุกนามสกุล
<input type="file" id="soundFile" accept="audio/*" />
//รองรับไฟล์เสียงทุกนามสกุล
<input type="file" id="videoFile" accept="video/*" />
//รองรับไฟล์วีดีโอทุกนามสกุล
<input type="file" accept="image/*,.pdf" />
//รองรับไฟล์ภาพทุกนามสกุล และ ไฟล์นามสกุล .pdfเลือก upload มากกว่า 1 file
ต่อกับ input type file อีกซักหน่อยค่ะ โดยปกติจะให้เรา upload file แค่เพียง 1 file เท่านั้น แต่ถ้าเราใช้ multiple attribute ก็จะทำให้สามารถเลือกได้มากกว่า 1 file ค่ะ โดย action ของ pc กับ mobile จะต่างกันเล็กน้อยนะคะ ถ้าเป็น pc เราจะต้องกดปุ่ม Shift หรือ Control เพื่อเลือกหลายๆ ไฟล์ แต่ถ้าเป็น mobile ก็ select ตาม default ของแต่ละเครื่องเลยค่ะ
<input type="file" id="file" name="file" multiple />ลองเล่น attribute ของ input file ต่างๆ ได้ที่ด้านล่างนี้เลยค่ะ
รู้จักและปรับแต่ง autocomplete
โดยปกติแล้ว browser จะจำข้อมูลที่ user ได้กรอกไว้ใน input autocomplete attribute ของ input จึงเพิ่มเข้ามาเพื่อปรับแต่งในส่วนนี้ค่ะ เพราะในบาง field เราก็ไม่ได้อยากให้ browser แสดง suggestion ข้อมูลที่พวกเราเคยกรอกไปแล้วขึ้นมา (จะด้วยเหตุผลทาง privacy ก็ดี) ก็สามารถสั่งจาก attribute นี้ได้เลยค่ะโดยจะ set value ดังนี้ค่ะ
<input type="text" id="cc" name="cc" autocomplete="off" />
// สั่งปิด autocomplete เฉพาะ feild นี้ค่ะ
<form method="post" action="/form" autocomplete="off">
…
</form>
// หรือเราจะสั่งปิด autocomplete ทั้ง form ก็ได้เช่นกันค่ะแต่ถ้าสังเกต autocomplete บางจุดจะไม่รู้ว่าเราต้องการกรอกอะไรค่ะ อาจจะแสดง suggest รวมหรือ ไม่แสดงเลยก็ได้ ทางแก้คือเราสามารถใส่ autocomplete ที่เฉพาะเจาะจงได้ลึกลงไปอีกค่ะ
<input name="name" type="text" autocomplete="name">
// แสดงข้อมูล ชื่อ ที่เราเคยกรอกไป
<input name="email" type="email" autocomplete="email">
// แสดงข้อมูล email ที่เราเคยกรอกไป
<input name="country" type="text" autocomplete="country-name">
// แสดงข้อมูล ประเทศ ที่เราเคยกรอกไปดู value เพิ่มเติมได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
Overriding :auto-fill styles
ถ้าสังเกต field ที่เป็น autocomplete ให้จะแสดงสีที่ต่างกับ field ที่กรอกแบบปกตินะคะ ซึ่งส่วนนี้เราสามารถปรับแต่งได้ด้วย pseudo-class :auto-fill ค่ะ
input:autofill {
border: 3px solid darkorange;
}
input:-webkit-autofill {
border: 3px solid darkorange;
}หลักๆ คำสั่งจะใช้ปรับสี border เมื่อ field ดึง text มาใส่ แต่ถ้าอยากปรับสี text หรือ bg อาจจะทำได้ยากเพราะเราจะเจอ style overriding ของ browser ที่มาพร้อมกับ !important แล้วค่ะ ดังภาพ
เลยมีการปรับมาใช้คำสั่ง -webkit-text-fill-color กับ box-shadow แทน
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #31b0dd;
-webkit-box-shadow: 0 0 0px 40rem #ffff inset;
}
/* ปรับสี text ด้วย -webkit-text-fill-color และปรับสี bg ด้วยคำสั่ง box-shadow */รู้หรือไม่เราสามารถปรับ autofill ใน browser ของเราได้เอง ตัวอย่าง browser chrome ให้ไปที่ Settting > Autofill ค่ะ ☺️
Ordered List with Nested Counters
เมื่อเราต้องเขียน list จากเอกสาร มาวางใน html แล้วใน list เอกสารนั้นมีความซับซ้อนของลำดับชั้น การ hard code อาจจะเป็นเรื่องที่ยุ่งยากและผิดพลาดได้ง่าย แต่ทราบหรือไม่คะว่า จริงๆ แล้วเรามี CSS Counters ที่สามารถเอามาจัดการกับส่วนนี้ได้
โดยปกติแล้วเราจะใช้ Ordered HTML List ในการเขียน ดังภาพด้านล่างค่ะ
ซึ่งผลที่ได้แบบที่ยังไม่มี css จะเป็นแบบนี้
เราจึงจะต้องล้าง style โดยใช้ list-style-type: none; ต่อจากนั้นเราจะใส่ counter-reset โดย value ของ property นี้ จะเป็นตัวแปรที่เรากำหนดชื่อมาเพื่อที่จะเป็นหลักในการนับค่ะ ส่วนที่ li เราจะใส่ตัวเลขให้ที่ ::before Selector โดยใช้ counter-increment ที่เป็น property สำหรับเพิ่มหรือลด value ของ counter ใส่เป็นตัวแปรชื่อเดียวกับ counter-reset เพื่อให้สัมพันธ์กัน จากนั้นที่ li:before เราจะใส่ counters() function ที่ด้านในจะมีตัวแปรตัวเดียวกันดังนี้ค่ะ content: counters(ตัวแปร, '.'); เดี๋ยวเรามาดู code กับผลที่ได้กัน
เท่านี้เราก็จะได้ nest list โดยที่ไม่ต้องกังวลว่าจะนับผิดแล้วค่ะ และนอกจากนี้เรายังสามารถกำหนดว่าจะนับจากตัวเลขเท่าไรได้แค่ใส่เลขที่ด้านหลัง value ที่ counter-reset ได้เลยค่ะ
และเราก็ยังสามารถปรับจากตัวเลขเป็นแบบอื่นๆ ได้ตามค่า list-style-type Property ได้อีกด้วยค่ะ
สุดท้ายนี้ต้องขอขอบคุณบทความด้านล่างมา ณ ที่นี้ด้วยค่ะ 😊
