ด้วยสไตล์ CSS คุณสามารถเปลี่ยนขนาดแบบอักษร ประเภทแบบอักษร สี และคุณสมบัติข้อความอื่นๆ รวมถึงเพิ่มเส้นขอบ สีพื้นหลัง และรูปภาพพื้นหลังได้ ความกว้างของฟิลด์ถูกกำหนดโดยคุณสมบัติความกว้าง
ตารางที่ 3. แอ็ตทริบิวต์แท็ก
| คุณลักษณะ |
ความหมาย/คำอธิบาย |
|---|
| ยอมรับ |
ระบุประเภทของไฟล์ที่อนุญาตให้ส่งไปยังเซิร์ฟเวอร์ ระบุเฉพาะสำหรับ . ค่าที่เป็นไปได้:
file_extension - อนุญาตให้อัปโหลดไฟล์ที่มีนามสกุลที่ระบุ เช่นยอมรับ=".gif" , ยอมรับ=".pdf" , ยอมรับ=".doc"
audio/* - อนุญาตให้ดาวน์โหลดไฟล์เสียง
video/* - อนุญาตให้ดาวน์โหลดไฟล์วิดีโอ
image/* - อนุญาตให้อัพโหลดรูปภาพได้
media_type - ระบุประเภทสื่อของไฟล์ที่อัพโหลด |
| ทางเลือกอื่น |
กำหนด ข้อความแสดงแทนสำหรับรูปภาพ ระบุเฉพาะสำหรับ .
|
| เติมข้อความอัตโนมัติ |
รับผิดชอบในการจดจำค่าที่ป้อนในช่องข้อความและแทนที่ค่าเหล่านั้นโดยอัตโนมัติสำหรับการป้อนข้อมูลในภายหลัง:
เปิด - หมายความว่าฟิลด์ไม่ได้รับการป้องกัน และสามารถบันทึกและดึงค่าของฟิลด์ได้
ปิด - ปิดใช้งานการเติมข้อความอัตโนมัติสำหรับฟิลด์แบบฟอร์ม |
| ออโต้โฟกัส |
ช่วยให้คุณมั่นใจได้ว่าในแบบฟอร์มที่กำลังโหลด ช่องป้อนข้อมูลอย่างน้อยหนึ่งช่องมีโฟกัสอยู่แล้ว (ถูกเลือก) พร้อมสำหรับการป้อนค่า |
| ตรวจสอบแล้ว |
แอตทริบิวต์จะตรวจสอบว่าช่องทำเครื่องหมายถูกเลือกโดยค่าเริ่มต้นในการโหลดเพจสำหรับฟิลด์ประเภท type="checkbox" และ type="radio" หรือไม่ |
| พิการ |
|
| รูปร่าง |
ค่าแอตทริบิวต์จะต้องเท่ากับแอตทริบิวต์รหัสขององค์ประกอบ |
| การก่อตัว |
ระบุ URL ของไฟล์ที่จะประมวลผลข้อมูลที่ป้อนในช่องเมื่อส่งแบบฟอร์ม ตั้งค่าเฉพาะสำหรับฟิลด์ประเภท type="submit" และ type="image" คุณลักษณะจะแทนที่ค่าของคุณลักษณะการกระทำของฟอร์มเอง |
| ประเภท formenc |
กำหนดวิธีการเข้ารหัสข้อมูลฟิลด์แบบฟอร์มเมื่อส่งไปยังเซิร์ฟเวอร์ แทนที่ค่าของแอตทริบิวต์ enctype ของแบบฟอร์ม ตั้งค่าเฉพาะสำหรับฟิลด์ประเภท type="submit" และ type="image" ตัวเลือก:
application/-x-www-form-urlencoded เป็นค่าเริ่มต้น อักขระทั้งหมดจะถูกเข้ารหัสก่อนที่จะส่ง (ช่องว่างจะถูกแทนที่ด้วยอักขระ + อักขระพิเศษจะถูกแปลงเป็นค่า ASCII HEX)
multipart/form-data - อักขระไม่ได้ถูกเข้ารหัส
ข้อความ/ธรรมดา - ช่องว่างจะถูกแทนที่ด้วยอักขระ + และอักขระพิเศษจะไม่ถูกเข้ารหัส |
| รูปแบบวิธีการ |
คุณลักษณะระบุวิธีที่เบราว์เซอร์จะใช้ในการส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์ ตั้งค่าเฉพาะสำหรับฟิลด์ประเภท type="submit" และ type="image" แทนที่ค่าของแอตทริบิวต์วิธีการของแบบฟอร์ม ตัวเลือก:
get คือค่าเริ่มต้น ข้อมูลจากแบบฟอร์ม (คู่ชื่อ/ค่า) จะถูกเพิ่มไปยัง url และส่งไปยังเซิร์ฟเวอร์: URL?name=value&name=value
ข้อมูลหลังแบบฟอร์มจะถูกส่งเป็นคำขอ http |
| ตรวจสอบแบบฟอร์ม |
ระบุว่าข้อมูลฟิลด์แบบฟอร์มไม่ควรได้รับการตรวจสอบเมื่อมีการส่งแบบฟอร์ม แทนที่ค่าของแอตทริบิวต์ novalidate ของแบบฟอร์ม สามารถใช้ได้โดยไม่ต้องระบุค่าแอตทริบิวต์ |
| รูปแบบเป้าหมาย |
ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม ตั้งค่าเฉพาะสำหรับฟิลด์ประเภท type="submit" และ type="image" แทนที่ค่าของแอตทริบิวต์เป้าหมายของแบบฟอร์ม
_parent - โหลดการตอบสนองลงในเฟรมหลัก
_top - โหลดการตอบสนองแบบเต็มหน้าจอ
framename - โหลดการตอบสนองลงในเฟรมด้วยชื่อที่ระบุ |
| ความสูง |
ค่าแอตทริบิวต์ประกอบด้วยจำนวนพิกเซลโดยไม่ต้องระบุหน่วย ตั้งค่าความสูงของช่องแบบฟอร์มเช่น type="image" เช่น . ขอแนะนำให้ตั้งค่าทั้งความสูงและความกว้างของฟิลด์พร้อมกัน |
| รายการ |
เป็นการอ้างอิงถึงองค์ประกอบ |
| สูงสุด |
ช่วยให้คุณสามารถจำกัดการป้อนข้อมูลตัวเลขที่อนุญาตให้เป็นค่าสูงสุด ค่าแอตทริบิวต์สามารถมีเลขจำนวนเต็มหรือเศษส่วนได้ ขอแนะนำให้ใช้แอตทริบิวต์นี้ร่วมกับแอตทริบิวต์ min ใช้ได้กับประเภทฟิลด์ต่อไปนี้: number , range , date , datetime , datetime-local , month , time and week |
| ความยาวสูงสุด |
แอ็ตทริบิวต์ระบุจำนวนอักขระสูงสุดที่ป้อนในฟิลด์ ค่าเริ่มต้นคือ 524288 อักขระ |
| นาที |
ช่วยให้คุณสามารถจำกัดการป้อนตัวเลขที่อนุญาตให้เป็นค่าต่ำสุด |
| หลายรายการ |
อนุญาตให้ผู้ใช้ป้อนค่าแอตทริบิวต์หลายค่าโดยคั่นด้วยเครื่องหมายจุลภาค ใช้กับไฟล์และที่อยู่อีเมล ระบุโดยไม่มีค่าแอตทริบิวต์ |
| ชื่อ |
ระบุชื่อที่จะใช้ในการเข้าถึงองค์ประกอบ |
| ลวดลาย |
ให้คุณกำหนดการใช้ การแสดงออกปกติไวยากรณ์ของข้อมูลที่ควรได้รับอนุญาตในช่องใดช่องหนึ่ง ตัวอย่างเช่น pattern="(3)-(3)" - วงเล็บเหลี่ยมกำหนดช่วงของอักขระที่อนุญาต ในกรณีนี้ ตัวอักษรตัวพิมพ์เล็กใดๆ ตัวเลขในวงเล็บปีกกาบ่งชี้ว่าต้องใช้ตัวอักษรตัวพิมพ์เล็กสามตัว ตามด้วยเครื่องหมายขีดกลาง ตามด้วย ด้วยตัวเลขสามหลักในช่วงตั้งแต่ 0 ถึง 9 |
| ตัวยึดตำแหน่ง |
ประกอบด้วยข้อความที่แสดงในช่องป้อนข้อมูลจนกว่าจะเต็ม (ส่วนใหญ่มักเป็นคำใบ้) |
| อ่านเท่านั้น |
ไม่อนุญาตให้ผู้ใช้เปลี่ยนค่าขององค์ประกอบแบบฟอร์มในขณะที่เลือกและคัดลอกข้อความได้ ระบุโดยไม่มีค่าแอตทริบิวต์ |
| ที่จำเป็น |
แสดงข้อความระบุว่าจำเป็นต้องกรอกข้อมูล หากผู้ใช้พยายามส่งแบบฟอร์มโดยไม่ป้อนค่าที่ต้องการในช่องนี้ ข้อความเตือนจะปรากฏขึ้นบนหน้าจอ ระบุโดยไม่มีค่าแอตทริบิวต์ |
| ขนาด |
ระบุความกว้างที่มองเห็นได้ของฟิลด์เป็นอักขระ ค่าเริ่มต้นคือ 20 ใช้งานได้กับประเภทฟิลด์ต่อไปนี้: ข้อความ , ค้นหา , โทร , url , อีเมล และ รหัสผ่าน |
| src |
ระบุ URL ของรูปภาพเพื่อใช้เป็นปุ่มส่งสำหรับข้อมูลแบบฟอร์ม ระบุเฉพาะสนามเท่านั้น .
|
| ขั้นตอน |
ใช้สำหรับองค์ประกอบที่รับอินพุตตัวเลข ระบุจำนวนที่จะเพิ่มหรือลดค่าระหว่างการปรับช่วง (ขั้นตอน) |
| พิมพ์ |
ปุ่ม - สร้างปุ่ม
|
ช่องทำเครื่องหมาย - เปลี่ยนช่องป้อนข้อมูลให้เป็นช่องทำเครื่องหมายที่สามารถเลือกหรือล้างได้ เช่น
ฉันมีรถยนต์ |
สี - สร้างตัวเลือกสีในเบราว์เซอร์ที่รองรับ ทำให้ผู้ใช้สามารถเลือกค่าสีในรูปแบบเลขฐานสิบหกได้
|
วันที่ - ให้คุณป้อนวันที่ในรูปแบบ วว.ดด.ปปปป
วันเกิด: |
datetime-local - ให้คุณป้อนวันที่และเวลาโดยคั่นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ T โดยใช้รูปแบบ dd.mm.yyyy hh:mm
วันเกิด - วันและเวลา: |
อีเมล - เบราว์เซอร์ที่รองรับแอตทริบิวต์นี้จะต้องการให้ผู้ใช้ป้อนข้อมูลที่ตรงกับไวยากรณ์ของที่อยู่อีเมล
อีเมล: |
ไฟล์ - อนุญาตให้คุณอัปโหลดไฟล์จากคอมพิวเตอร์ของผู้ใช้
เลือกไฟล์: |
| ซ่อนเร้น - ซ่อนการควบคุมที่เบราว์เซอร์ไม่ได้แสดงและป้องกันไม่ให้ผู้ใช้เปลี่ยนค่าเริ่มต้น |
รูปภาพ - สร้างปุ่มเพื่อให้คุณสามารถแทรกรูปภาพแทนข้อความบนปุ่มได้
|
month - อนุญาตให้ผู้ใช้ป้อนหมายเลขปีและเดือนโดยใช้รูปแบบ yyyy-mm
|
number - มีไว้สำหรับป้อนค่าจำนวนเต็ม แอ็ตทริบิวต์ min , max และ step จะตั้งค่าค่าบน ล่าง และขั้นระหว่างค่า ตามลำดับ คุณลักษณะเหล่านี้จะถือว่าสำหรับองค์ประกอบทั้งหมดที่มีตัวบ่งชี้ตัวเลข ค่าเริ่มต้นขึ้นอยู่กับประเภทองค์ประกอบ
ระบุปริมาณ (ตั้งแต่ 1 ถึง 5): |
รหัสผ่าน - สร้างช่องข้อความในแบบฟอร์ม ในขณะที่อักขระที่ผู้ใช้ป้อนจะถูกแทนที่ด้วยเครื่องหมายดอกจัน สัญลักษณ์แสดงหัวข้อย่อย หรือไอคอนอื่น ๆ ที่เบราว์เซอร์กำหนด
ใส่รหัสผ่าน: |
วิทยุ - สร้างปุ่มตัวเลือก - การควบคุมในรูปแบบของวงกลมเล็ก ๆ ที่สามารถเปิดหรือปิดได้
มังสวิรัติ: |
| range - จะช่วยให้คุณสามารถสร้างองค์ประกอบอินเทอร์เฟซเช่นแถบเลื่อน, ต่ำสุด / สูงสุด - จะช่วยให้คุณกำหนดช่วงการเลือกได้ |
รีเซ็ต - สร้างปุ่มที่ล้างฟิลด์แบบฟอร์มจากการป้อนข้อมูลของผู้ใช้
|
ค้นหา - หมายถึงช่องค้นหา โดยค่าเริ่มต้นช่องป้อนข้อมูลจะมีรูปร่างเป็นรูปสี่เหลี่ยมผืนผ้า
ค้นหา: |
ส่ง - สร้างปุ่มมาตรฐานที่เปิดใช้งานโดยการคลิกเมาส์ ปุ่มรวบรวมข้อมูลจากแบบฟอร์มและส่งเพื่อการประมวลผล
|
ข้อความ - สร้างฟิลด์ข้อความบนแบบฟอร์มโดยการแสดงฟิลด์ข้อความบรรทัดเดียวสำหรับการป้อนข้อความ
|
เวลา - ให้คุณป้อนเวลาในรูปแบบ 24 ชั่วโมงโดยใช้รูปแบบ hh:mm ในการรองรับเบราว์เซอร์ จะปรากฏเป็นตัวควบคุมการป้อนตัวเลขพร้อมค่าที่ปรับได้ด้วยเมาส์ และยอมรับเฉพาะค่าเวลาเท่านั้น
ระบุเวลา: |
url - ฟิลด์นี้มีไว้สำหรับระบุ URL
หน้าหลัก: |
สัปดาห์ - เครื่องมือดัชนีที่เกี่ยวข้องอนุญาตให้ผู้ใช้เลือกหนึ่งสัปดาห์ของปี หลังจากนั้นจะให้ข้อมูลในรูปแบบ nn-yyyy จำนวนสัปดาห์อาจเป็น 52 หรือ 53 ขึ้นอยู่กับปี
ระบุสัปดาห์: |
| ค่า |
ระบุข้อความที่แสดงบนปุ่ม กล่อง หรือข้อความที่เกี่ยวข้อง ไม่ได้ระบุสำหรับฟิลด์ประเภทไฟล์ |
| ความกว้าง |
ค่าแอตทริบิวต์ประกอบด้วยจำนวนพิกเซล ช่วยให้คุณกำหนดความกว้างของฟิลด์แบบฟอร์ม |
ตารางที่ 4. แอ็ตทริบิวต์แท็ก
7. ปุ่ม
องค์ประกอบ สร้างปุ่มที่คลิกได้ ต่างจากปุ่มที่สร้างขึ้น ( , , , ) ภายในองค์ประกอบ
เพื่อการแสดงองค์ประกอบที่ถูกต้อง
ปุ่มอนุญาตให้ผู้ใช้สามารถส่งข้อมูลไปยังแบบฟอร์ม ล้างเนื้อหาของแบบฟอร์ม หรือดำเนินการอื่นๆ คุณสามารถสร้างเส้นขอบ เปลี่ยนพื้นหลัง และจัดแนวข้อความบนปุ่มได้
ตารางที่ 9. แอ็ตทริบิวต์แท็ก
8. ช่องทำเครื่องหมายและปุ่มตัวเลือกในรูปแบบ
ช่องทำเครื่องหมายในแบบฟอร์มถูกตั้งค่าโดยใช้โครงสร้าง และสวิตช์-การใช้งาน .
ช่องทำเครื่องหมายต่างจากปุ่มตัวเลือกตรงที่สามารถมีหลายช่องทำเครื่องหมายในรูปแบบเดียว หากระบุแอตทริบิวต์ที่เลือกไว้สำหรับช่องทำเครื่องหมาย เมื่อเพจโหลด ช่องแบบฟอร์มที่เกี่ยวข้องจะถูกทำเครื่องหมายในช่องทำเครื่องหมายแล้ว
องค์ประกอบ
ในเกือบทุกไซต์คุณสามารถดูแบบฟอร์มลงทะเบียนได้ แน่นอนว่ามีคนที่เอาแบบฟอร์มของคนอื่นมาใส่เองแล้วผู้ใช้ต้องการลงทะเบียน แต่ทำไม่ได้ มีหลายกรณีที่อนุญาตให้ลงทะเบียนรหัสผ่านบางอย่างได้และคุณสามารถลงทะเบียนได้ แต่เมื่อคุณพยายามเข้าสู่ไซต์ มีข้อผิดพลาดปรากฏขึ้นว่านี่เป็นรหัสผ่านที่ไม่ถูกต้อง ดังนั้นไซต์จึงสูญเสียผู้เข้าชมในจำนวนหนึ่ง ดังนั้นโปรดใช้ความระมัดระวัง .
สามารถดูตัวอย่างจริงได้ที่นี่:
ดาวน์โหลด
นี่ไม่ใช่บทเรียนแรกในหัวข้อนี้บางทีคุณอาจไม่เคยเห็นบทเรียนที่ผ่านมาและพวกเขาอาจเป็นที่สนใจของคุณ:
ส่วน HTML
มาดูกันว่าแบบฟอร์มนี้ประกอบด้วยอะไรบ้าง:
| 21
22
23
24
25
26
27
28
29
| <form class = "contact_form" action = "#" method = "post" name = "contact_form" >
<อุล >
<ลี >
<h2 >เขียนถึงเรา</h2>
<span class = "required_notification">* ช่องที่ต้องเติม</ช่วง>
</li>
<ลี >
<ป้ายกำกับสำหรับ = "ชื่อ">ชื่อ:</ฉลาก>
<ประเภทอินพุต = ตัวยึดตำแหน่ง "ข้อความ" = "เปตรอฟ อเล็กซานเดอร์"จำเป็น />
</li>
<ลี >
<ป้ายกำกับสำหรับ = "อีเมล">อีเมล:</ฉลาก>
<ประเภทอินพุต = "email" name = "email" placeholder= "name@site"
required /
>
!}
<ระดับช่วง = "form_hint">เช่น "name@site"</ช่วง>
</li>
<ลี >
<ป้ายกำกับสำหรับ = "เว็บไซต์">เว็บไซต์:</ฉลาก>
<ประเภทอินพุต = "url" name = "เว็บไซต์" placeholder= "https://website"
required pattern=
"(http|https)://.+"
/
>
!}
<ระดับช่วง = "form_hint">เช่น "https://website"</ช่วง>
</li>
<ลี >
<ป้ายกำกับสำหรับ = "ข้อความ">ข้อความ:</ฉลาก>
<ชื่อ textarea = "ข้อความ" cols = "40" แถว = "6" จำเป็น>
</li>
<ลี >
<ระดับปุ่ม = "ส่ง" ประเภท = "ส่ง">ส่ง</ปุ่ม>
</li>
</ul>
</แบบฟอร์ม>
|
หากคุณได้ศึกษาบทเรียนก่อนหน้านี้แล้ว คุณจะคุ้นเคยกับคุณลักษณะต่างๆ เช่น ตัวยึดตำแหน่งและ ที่จำเป็น.
แต่ฉันจะทำซ้ำอีกครั้ง:
ตัวยึดตำแหน่ง- การมีอยู่ของแอตทริบิวต์นี้หมายความว่าพื้นหลังของช่องข้อความนี้จะเป็นข้อความที่ระบุในค่าของแอตทริบิวต์นี้ และเมื่อเข้าไปก็จะหายไป
ที่จำเป็น- หากฟิลด์มีแอตทริบิวต์นี้ แสดงว่าฟิลด์นั้นจำเป็น
และเราไม่ได้ใช้ Javascript เพราะ HTML5 ช่วยให้เราทำมันได้ด้วยฟังก์ชันของมันเอง
นอกจากนี้ยังมีคุณลักษณะใหม่ที่นี่ รูปแบบ = "(http|https)://.+"- ระบุว่าที่อยู่เว็บของเว็บไซต์ควรขึ้นต้นด้วยอะไร มิฉะนั้นจะเกิดข้อผิดพลาด
ส่วน CSS
ตอนนี้เราเสร็จสิ้นส่วน HTML แล้ว และเราจำเป็นต้องดูแบบฟอร์มของเรา เพราะ องค์ประกอบแบบฟอร์มทั้งหมดอยู่ในรายการแบบไม่เรียงลำดับ ดังนั้นการใช้ตัวเลือกที่เหมาะสมจะกำหนดสไตล์:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .contact_form ul ( width : 750px ; list-style-type : none ; list-style-position : Outside ; Margin : 0px ; padding : 0px ; ) .contact_form li ( padding : 12px ; border-bottom : 1px solid #eee ; ตำแหน่ง : ญาติ ; ) .contact_form li :first-child , .contact_form li :last-child ( ขอบล่าง : 1px solid #777 ; ) |
คุณสมบัติสุดท้ายหมายความว่าเราตั้งค่าเส้นขอบให้กับองค์ประกอบแรกและองค์ประกอบสุดท้ายของรายการ ถัดไป กำหนดสไตล์หลักสำหรับองค์ประกอบของแบบฟอร์ม:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .contact_form label ( width : 150px ; margin-top : 3px ; display :inline- block; float : left ; padding : 3px ; ) .contact_form input ( height : 20px ; width : 220px ; padding : 5px 8px ; ) ( padding : 8px ; width : 300px ; ) ปุ่ม .contact_form ( ขอบซ้าย : 156px ; ) |
ตอนนี้เรามาเขียนสไตล์เมื่อฟิลด์มีการใช้งานและเมื่อไม่ได้ใช้งาน:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| อินพุต .contact_form, .contact_form textarea ( border : 1px solid #aaa ; box-shadow : 0px 0px 3px #ccc , 0 10px 15px #eee inset ; border-radius : 2px ; padding-right : 30px ; -moz-transition : padding .25s; -webkit-transition : padding .25s; -o-transition : padding .25s; transition : padding .25s; ) .contact_form อินพุต:โฟกัส , .contact_form textarea:โฟกัส ( พื้นหลัง : #fff ; เส้นขอบ : 1px solid # 555 ; box-shadow : 0 0 3px #aaa ; padding-right : 70px ; ) |
| 1
2
3
4
5
6
7
8
9
10
11
12
13
| .contact_form input:required , .contact_form textarea:required ( พื้นหลัง : #fff url (images/red_asterisk.png ) no-repeat 98% center ; ) .contact_form input:required :valid , .contact_form textarea:required :valid ( พื้นหลัง : #fff url (images/valid.png ) ไม่ทำซ้ำ 98% ตรงกลาง ;box-shadow : 0 0 5px #5cd053 ;border-color : #28921f ; ) .contact_form input:focus :invalid , .contact_form textarea:focus :invalid ( พื้นหลัง : #fff url (images/invalid.png ) ไม่ซ้ำ 98% ตรงกลาง ; box-shadow : 0 0 5px #d45252 ; border-color : #b03535 ) |
เหลืออีกนิดหน่อย :)) ขั้นตอนสุดท้ายคือการกำหนดสไตล์สำหรับคำแนะนำเครื่องมือ:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .form_hint ( พื้นหลัง : #d45252 ; border-radius : 3px 3px 3px 3px ; color : white ; margin-left : 8px ; padding : 1px 6px ; z-index : 999 ; /* หมายถึงคำแนะนำเครื่องมือจะแทนที่องค์ประกอบทั้งหมด */ตำแหน่ง : สัมบูรณ์ ; /* คุณสามารถแยกคำใบ้ออกเป็นสองบรรทัดได้ */จอแสดงผล : ไม่มี ; ) .form_hint : :before ( เนื้อหา : " \25C0"; สี : #d45252 ; ตำแหน่ง : สัมบูรณ์ ; ด้านบน : 1px ซ้าย : -6px ) .contact_form input:focus + .form_hint ( display : inline ; ) .contact_form input:required :valid + .form_hint ( พื้นหลัง : #28921f ; ) .contact_form input:required :valid + .form_hint : :before ( color : #28921f ; ) |
และขั้นตอนสุดท้ายคือจัดสไตล์ปุ่มส่ง:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| button.submit ( สีพื้นหลัง : #68b12f ; พื้นหลัง : -webkit-gradient(linear , left top , left below , from(#68b12f ) , ถึง(#50911e ) ) ; background : -webkit-linear-gradient(top , #68b12f , #50911e ) ; background : -moz-linear-gradient(top , #68b12f , #50911e ) ; background : -ms-linear-gradient(top , #68b12f , #50911e ) ; พื้นหลัง : -o-linear- การไล่ระดับสี(top , #68b12f , #50911e ) ; background : linear-gradient(top , #68b12f , #50911e ) ; border : 1px solid #509111 ; border-bottom : 1px solid #5b992b ; border-radius : 3px ; -webkit -border-radius : 3px ; -moz-border-radius : 3px ; -ms-border-radius: 3px ; -o-border-radius : 3px ; box-shadow : ใส่ 0 1px 0 0 #9fd574 ; -webkit-box -shadow : 0 1px 0 0 #9fd574 สิ่งที่ใส่เข้าไป ; -moz-box-shadow : 0 1px 0 0 #9fd574 สิ่งที่ใส่เข้าไป ; -ms-box-shadow: 0 1px 0 0 #9fd574 สิ่งที่ใส่เข้าไป ; -o-box-shadow : 0 1px 0 0 #9fd574 สิ่งที่ใส่เข้าไป ;สี : สีขาว ;น้ำหนักตัวอักษร : ตัวหนา ; การขยาย : 6px 20px ; การจัดแนวข้อความ : กึ่งกลาง ; ข้อความเงา : 0 -1px 0 #396715 ; ) button.submit :hover ( ความทึบ : .85; เคอร์เซอร์ : ตัวชี้ ; ) button.submit :active ( เส้นขอบ : 1px solid #20911e ; box-shadow : 0 0 10px 5px #356b0b inset ; -webkit-box-shadow : 0 0 10px 5px # 356b0b สิ่งที่ใส่เข้าไป ; -moz-box-shadow : 0 0 10px 5px # 356b0b สิ่งที่ใส่เข้าไป ; -ms-box-shadow: 0 0 10px 5px # 356b0b สิ่งที่ใส่เข้าไป ; -o-box-shadow : 0 0 10px 5px #356b0b สิ่งที่ใส่เข้าไป ; ) |
บทสรุป
โอเค จบแล้ว! 🙂 เทคโนโลยีอินเทอร์เน็ตกำลังพัฒนาอย่างรวดเร็วจนคุณไม่มีเวลาสังเกตว่าทุกคนจะใช้ชุด HTML5 + CSS3 อย่างไร แน่นอนว่าคุณต้องพิจารณาว่าองค์ประกอบนี้จะมีลักษณะอย่างไรในเบราว์เซอร์รุ่นเก่า แต่คุณก็ไม่ควรลืมคุณสมบัติใหม่เช่นกัน!
ตำแหน่ง
เกี่ยวกับการจัดทีมเปิดและการแข่งขันส่วนตัว
Powerlifting และ bench press โดยไม่ต้องใช้อุปกรณ์
G. Podolsk และภูมิภาคมอสโก
1. เป้าหมายและวัตถุประสงค์
การแข่งขันจัดขึ้นเพื่อสร้างความนิยมในการยกกำลังในเมืองโปโดลสค์และภูมิภาคมอสโก
การศึกษาของคนรุ่นใหม่ที่มีการพัฒนาทางร่างกายและการส่งเสริมวิถีชีวิตที่มีสุขภาพดี
ดึงดูดเยาวชนให้เข้ามาศึกษาพลศึกษาและกีฬาอย่างเป็นระบบ
การสร้างแรงจูงใจให้วัยรุ่นและเยาวชนมีส่วนร่วมในวัฒนธรรมทางกายภาพ
การปรับปรุงน้ำใจนักกีฬาของนักกีฬาในเมืองโปโดลสค์และภูมิภาคมอสโก
·การระบุนักกีฬาที่แข็งแกร่งที่สุดในโปโดลสค์และภูมิภาคมอสโก
การก่อตัวของทีมเพื่อการแสดงในการแข่งขันแบบทีมเปิดในโปโดลสค์ในการยกกำลัง
2. วันที่และสถานที่
การแข่งขันจะจัดขึ้นในวันที่ 16 พฤศจิกายน 2556 ที่ Palace of Culture ในวันที่ 1 พฤษภาคม: ภูมิภาคมอสโก, Klimovsk, ถนน Zavodskaya, 3 การเริ่มต้นการแข่งขันและการชั่งน้ำหนักจะประกาศเพิ่มเติม (ทางอีเมลหรือ SMS)
3. องค์กรและความเป็นผู้นำ
องค์กรทั่วไปของการแข่งขันดำเนินการโดยศูนย์ Fakel เพื่อการศึกษาพลเรือนและความรักชาติของเยาวชนและโรงยิม Good Lift โดยมีส่วนร่วมของสาขา Podolsk ของ Military Brotherhood และมูลนิธิการกุศล Healthy Nation
การควบคุมโดยตรงดำเนินการโดยโค้ชยิมนาสติกกีฬาของ MU "Fakel" Popov S.A. ผู้อำนวยการโรงยิม "Good Lift" Yakovlev P.S. และตัวแทนมูลนิธิการกุศล "ประชาชาติสุขภาพดี" Rabotkin I.F.
4. คู่แข่ง
องค์กรและสถาบันที่สนใจได้รับเชิญให้เข้าร่วมการแข่งขัน เช่นเดียวกับนักกีฬาแต่ละคนที่มีอายุครบ 16 ปี ซึ่งได้ส่งใบสมัครเข้าร่วมการแข่งขันแล้ว
ผู้จัดงานขอสงวนสิทธิ์ในการประกาศมาตรฐานการรับเข้าแข่งขันในภายหลัง โดยต้องแจ้งนักกีฬาทราบ (ทางอีเมล์หรือ SMS)
ผู้จัดงานขอสงวนสิทธิกรณีสมัครเกินจำนวนไม่เกินวันที่ 9 พฤศจิกายน 2556 ประกาศมาตรฐานการรับเข้าแข่งขัน โดยกำหนดให้นักกีฬาต้องแจ้งข้อมูลทางโอเพ่นซอร์สพร้อมทั้งส่ง SMS และ ข้อความอีเมล
5. ลำดับการแข่งขันและเงื่อนไขในการส่งใบสมัคร
การสมัครเข้าร่วมการแข่งขันควรส่งก่อนวันที่ 9 พฤศจิกายน 2013 ทางอีเมล: [ป้องกันอีเมล]หรือทางข้อความ SMS ไปที่หมายเลข +79099250337 (ค่า SMS เท่ากับค่าข้อความ SMS จากผู้ให้บริการโทรคมนาคมของคุณ)
ความสนใจ!โปรดดูภาคผนวก 1 สำหรับแบบฟอร์มใบสมัครที่ถูกต้อง
6. ขั้นตอนในการตัดสินผู้ชนะ
ความสนใจ!การตัดสินการแข่งขันดำเนินการตามกฎของ IPF (ดูภาคผนวก 2)
การแข่งขันจะจัดขึ้นในประเภทอายุเปิด (Open)
ในการแข่งขันชิงแชมป์ประเภทบุคคล:
ผู้หญิง c แข่งขันในประเภทน้ำหนักสัมบูรณ์ ผู้ชนะ (ผู้ที่ได้อันดับที่ 1-2-3) จะถูกกำหนดโดยสูตรวิลค์ส
ผู้ชนะ ในผู้ชายกำหนดไว้ใน หมวดหมู่สูงสุด 75 กก. สูงสุด 90 กก. สูงสุด 110 กก. และเกิน 110 เพื่อผลลัพธ์ที่ดีที่สุด ผู้ชนะใน แน่นอนการแข่งขันชิงแชมป์ (นักกีฬาที่คว้าอันดับ 1-2-3) ในไตรกีฬาและบัลลังก์จะถูกกำหนดโดยสูตรของวิลค์ส
ในการแข่งขันชิงแชมป์ประเภททีมโดยคำนึงถึงผลลัพธ์ที่ดีที่สุดของสมาชิกทีมชาย 4 รายการและผลงานหญิง 1 รายการ
คะแนนจะได้รับตามโครงการดังต่อไปนี้:
อันดับที่ 1 - 6 คะแนน
อันดับที่ 2 - 4 คะแนน
อันดับที่ 3 - 3 คะแนน
อันดับที่ 4 - 2 คะแนน
อันดับที่ 5 - 1 คะแนน
ผู้ชนะการแข่งขันชิงแชมป์ประเภททีมคือทีมที่ทำคะแนนได้สูงสุดในทุกทีม
7. พิธีมอบรางวัลผู้ชนะ
การมอบรางวัลของผู้ชนะและผู้ได้รับรางวัลในการแข่งขันชิงแชมป์ประเภทบุคคลและทีมซึ่งได้อันดับที่ 1-3 ในการเสนอชื่อนั้นจะดำเนินการพร้อมใบรับรองและเหรียญที่ระลึก
8. การเงิน
ค่าใช้จ่ายที่เกี่ยวข้องกับองค์กร การถือครอง และการมอบรางวัลผู้ชนะจะตกเป็นภาระของผู้จัดการแข่งขัน องค์กรที่สนใจ และผู้สนับสนุน ค่าใช้จ่ายที่เกี่ยวข้องกับการเดินทางและอาหารของผู้เข้าร่วมจะเป็นผู้รับผิดชอบโดยองค์กรที่ส่ง ไม่มีค่าธรรมเนียมแรกเข้า
ภาคผนวก 1
แอปพลิเคชันตัวอย่าง (ส่งทางอีเมลหรือข้อความ SMS):
1. การเสนอชื่อ เช่น bench press หรือ triathlon
2.ชื่อทีมหรือหมายเหตุส่วนตัว*
3. ชื่อเต็ม *–
4. ปีเกิด *–
หลักที่ 6 *–
7. ผลลัพธ์ที่ดีที่สุด * (ในช่วง 6 เดือนที่ผ่านมา) -
8. อายุ* -
9. โค้ช -
10. หมายเลขโทรศัพท์ติดต่อได้ (ควรเป็นโทรศัพท์มือถือ)* -
ต้องระบุช่องที่มีเครื่องหมายดอกจัน
ความสนใจ!ผู้เข้าร่วมทุกคนในวันแข่งขันจะต้องมีวีซ่าที่ได้รับการรับรองโดยแพทย์ และหนังสือเดินทางหรือบัตรประจำตัวประชาชน (ใบอนุญาต บัตรประจำตัวทหาร) หากไม่มีเอกสารเหล่านี้ นักกีฬาจะไม่ได้รับอนุญาตให้แข่งขัน
ภาคผนวก 2
กฎการแข่งขัน:
- การแสดงในการแข่งขันเกิดขึ้นโดยไม่ต้องใช้อุปกรณ์ (เสื้อเชิ้ตม้านั่ง ชุดเอี๊ยม ผ้าพันหัวเข่าสำหรับพาวเวอร์ลิฟท์)
- คุณสามารถใช้: ผ้าพันมือ, เข็มขัด (ความกว้างของเข็มขัดสูงสุด - 10 ซม.)
- หากจำเป็น คุณสามารถใช้ผ้าพันแผลที่ไม่รองรับ (ที่ขาหรือแขนข้างเดียว) ผ้าพันแผลที่ไม่รองรับคือผ้าพันแผลทางการแพทย์ทั่วไป ต้องแสดงผ้าพันแผลต่อผู้พิพากษาก่อนใช้งาน
- แบบฝึกหัดดำเนินการตามกฎของ IPF
สควอท(กฎและลำดับการดำเนินการ)
หลังจากถอดบาร์ออกแล้ว (ผู้ช่วยอาจช่วยได้) นักกีฬายกจะกลับสู่ตำแหน่งเริ่มต้น
หลังจากที่นักกีฬาเข้ารับตำแหน่งเริ่มต้นแล้ว ผู้ตัดสินจะออกคำสั่ง - หมอบ
นักกีฬาจะทำการสควอชโดยให้ส่วนบนของขาที่ข้อต่อสะโพกอยู่ต่ำกว่าด้านบนของหัวเข่า อนุญาตให้มีความพยายามเพียงครั้งเดียวเท่านั้นที่จะเคลื่อนที่ลง
นักกีฬาจะต้องกลับสู่ตำแหน่งแนวตั้งโดยอิสระโดยเหยียดขาออกจนสุดเข่า ลุกขึ้นสองครั้ง ("กระโดด", ห้าม)
ทันทีที่นักกีฬาเข้ารับตำแหน่งนิ่งผู้ตัดสินจะออกคำสั่งให้คืนบาร์เบลไปที่ชั้นวาง - RACKS
- ต้องห้าม- ข้อผิดพลาดในการปฏิบัติตามสัญญาณของหัวหน้าผู้พิพากษาเมื่อเริ่มต้นหรือสิ้นสุดการฝึก การเพิ่มขึ้นสองเท่า (กระโดด) จากตำแหน่งด้านล่างของหมอบหรือการเคลื่อนไหวลงขณะยืนขึ้น ข้อผิดพลาดในการงอขาที่หัวเข่าและลดตัวลงจนทำให้พื้นผิวส่วนบนของขาบริเวณข้อสะโพกอยู่ต่ำกว่าด้านบนของเข่า
แท่นกดนอนอยู่บนม้านั่ง(กฎและลำดับการดำเนินการ)
นักกีฬายกจะต้องนอนหงายโดยให้ศีรษะ ไหล่ และก้น "ทั้งหมด" สัมผัสกับพื้นผิวของม้านั่ง พื้นรองเท้าและส้นรองเท้าต้องสัมผัสกับพื้นผิวของแท่นหรือบล็อก (เท่าที่รูปร่างของรองเท้าเอื้ออำนวย)
นิ้วควรพันรอบบาร์ที่วางอยู่บนชั้นวาง ในขณะที่นิ้วหัวแม่มืออยู่ที่ "ในปราสาท" รอบๆ บาร์ ตำแหน่งนี้จะต้องคงไว้ในระหว่าง
ทำแบบฝึกหัด ห้ามจับถอยหลัง
เพื่อให้การยืนที่มั่นคง นักกีฬาอาจใช้แผ่นพื้นเรียบหรือบล็อกสูงจากพื้นผิวของแท่นไม่เกิน 30 ซม.
ระยะห่างระหว่างมือบนแฮนด์ที่วัดระหว่างนิ้วชี้ต้องไม่เกิน 81 ซม. (นิ้วชี้ทั้งสองต้องอยู่ภายในเครื่องหมาย 81 ซม.)
หลังจากถอดบาร์เบลออกจากชั้นวางโดยได้รับความช่วยเหลือจากผู้ช่วยหรือไม่ก็ตาม นักกีฬายกต้องรอสัญญาณจากหัวหน้าผู้พิพากษาโดยกางแขนออกจนสุด ("มีส่วนร่วม") ที่ข้อศอก
ควรส่งสัญญาณเพื่อเริ่มการกดบัลลังก์ทันทีที่นักกีฬาอยู่ในตำแหน่งที่อยู่กับที่
ตำแหน่งและบูมจะอยู่ในตำแหน่งที่ถูกต้อง สัญญาณให้เริ่มการฝึกคือคำสั่ง - START
หลังจากรับสัญญาณแล้วนักกีฬาจะต้องลดบาร์เบลลงที่หน้าอกและถือไว้ในตำแหน่งนิ่งบนหน้าอก (โดยปกติจะเป็นฐานของกระดูกสันอก) หลังจากนั้นผู้ตัดสินจะออกคำสั่ง - กด นักกีฬายกควรดันแฮนด์ขึ้นเป็นแขนตั้งตรง หลังจากยึดบาร์เบลในตำแหน่งนี้แล้ว ผู้ตัดสินจะออกคำสั่ง - ยืน
- ต้องห้าม– ความผิดพลาดใดๆ ในการปฏิบัติตามคำสั่งของผู้ตัดสิน การเปลี่ยนแปลงตำแหน่งเริ่มต้นระหว่างการออกกำลังกาย (การยก (การแยก) ของศีรษะ ไหล่ ก้นจากม้านั่ง หรือการเคลื่อนไหวของขาบนแท่นหรือบล็อก หรือการเคลื่อนไหวของมือไปตามบาร์) การเคลื่อนไหวลงของแท่งในระหว่างการกด ขาดการบีบบาร์ด้วยแขนที่ยืดออกจนสุดเมื่อสิ้นสุดการออกกำลังกาย
6. Deadlift (กฎและลำดับการดำเนินการ)
นักกีฬายกจะต้องอยู่ในตำแหน่งที่หันหน้าไปทางด้านหน้าของชานชาลา บาร์ซึ่งตั้งอยู่ในแนวนอนด้านหน้าขาของนักกีฬานั้นจะถูกจับด้วยมือทั้งสองข้างโดยพลการแล้วยกขึ้นจนกระทั่งนักกีฬายืนตัวตรง
เมื่อยกบาร์เบลด้วยแรงผลักเสร็จแล้ว ควรเหยียดขาที่หัวเข่าออกจนสุด ไหล่ควรเอนไปด้านหลัง
ผู้ตัดสินให้คำสั่ง - ลง
การยกคานหรือการพยายามยกโดยเจตนาใด ๆ ถือเป็นเซ็ต เมื่อการยกเริ่มขึ้นแล้ว จะไม่อนุญาตให้ขยับบาร์ลงไปด้านล่างจนกว่านักกีฬายกจะอยู่ในตำแหน่งแนวตั้งโดยเหยียดเข่าออกจนสุด หากแฮนด์ตกลงเมื่อไหล่ถูกดึงไปด้านหลัง ก็ไม่ใช่เหตุผลที่จะไม่นับน้ำหนักที่ยกขึ้น
- ต้องห้าม– การเคลื่อนไหวลงใด ๆ จนกว่าจะถึงตำแหน่งสุดท้าย รองรับบาร์ด้วยสะโพกของคุณขณะยกขึ้น ถอยหลังหรือเดินหน้า ลดแถบลงตามคำสั่ง ปล่อยบาร์เบลออกจากมือเมื่อดำเนินการคำสั่งลง
มีตำนานและความเข้าใจผิดมากมายในโลกของการพัฒนาซอฟต์แวร์ หากจะก้าวไปข้างหน้าและไม่หยุดยั้ง พวกมันจะต้องถูกทำลายอย่างแน่นอน ทุกวันนี้เกี่ยวกับความเข้าใจผิดที่ฝังแน่นที่สุดอย่างหนึ่งซึ่งค่อนข้างเป็นอันตรายเช่นกันเรียกว่า "ตำนานของฟิลด์ที่ต้องการ"
เราจะพูดถึงเกือบทุกระบบที่ใช้แบบฟอร์มในการป้อนข้อมูล ฟิลด์ที่ต้องกรอกคือฟิลด์แบบฟอร์ม โดยที่ระบบจะไม่ยอมรับข้อมูลจากคุณ ในบรรดานักพัฒนาซอฟต์แวร์ส่วนใหญ่มีความเห็นว่าฟิลด์ที่จำเป็นควรเป็น:
- ทุกสาขาที่จำเป็นจากมุมมองของหัวเรื่อง (เช่น ชื่อเต็มและวันเดือนปีเกิดของบุคคลหากเรากำลังพูดถึงสำนักงานหนังสือเดินทาง)
- ฟิลด์ทั้งหมดที่จำเป็นสำหรับการทำงานของระบบ (ฟิลด์ที่ไม่มีอัลกอริธึมจะไม่ทำงาน - ตัวอย่างเช่นวันที่เริ่มให้บริการเพื่อสร้างรายได้)
- ช่องสำคัญคือช่องที่ไม่จำเป็นแต่ เป็นที่น่าพอใจกรอก (เช่นเหตุผลสำหรับการเปลี่ยนแปลง) - ด้วยแรงจูงใจว่าผู้ใช้จะเหงื่อออกเมื่อไม่จำเป็นดีกว่าลืมป้อนค่าเมื่อจำเป็น
อย่างที่คุณเห็นมีตำนานที่ซับซ้อนมากมายที่ต้องกำจัดออกไปอย่างพิถีพิถันและเป็นระบบ เรามาเริ่มกันด้วยความเข้าใจผิดอีกสองประการ
ตามเนื้อผ้า โปรแกรมเมอร์จะรู้สึกเหมือนกำลังทำสิ่งที่ดีให้กับคนอื่นๆ ในโลกด้วยการสร้างสรรค์ผลิตภัณฑ์ที่ยอดเยี่ยม เช่น "ทดแทนชื่อผลิตภัณฑ์ใดๆ" โปรแกรมของพวกเขาเกือบจะเป็น Platonic eidos ซึ่งเป็นนามธรรมที่บริสุทธิ์ที่สุด ซึ่งเป็นสูตรทางคณิตศาสตร์ที่คำนวณได้แน่นอนบนชุดพารามิเตอร์จากขอบเขตคำจำกัดความของตัวเองอย่างเคร่งครัด จากมุมมองนี้ ช่องที่ต้องกรอกเป็นเพียงสิ่งเล็กๆ น้อยๆ ที่น่ารำคาญที่ต้องใส่ลงไปเพื่อสอนผู้ใช้ที่โง่เขลาและไม่สุภาพถึงวิธีการ ขวาป้อนข้อมูลเข้าสู่ระบบที่พวกเขาได้รับเกียรติให้ร่วมงานด้วย เชื่อกันว่าข้อมูลที่ไม่ถูกต้อง (ไม่สมบูรณ์) นั้นแย่มากถึงขนาดเก็บไว้ในฐานข้อมูลก็ไม่ถูกต้องอีกต่อไป แน่นอนว่าความเกียจคร้าน - จากมุมมองของนักพัฒนาการตรวจสอบความถูกต้องของข้อมูลในขั้นตอนการป้อนข้อมูลทำได้ง่ายกว่าและส่งผู้ใช้ไปตรวจสอบข้อมูลของพวกเขาอีกครั้งมากกว่าการเขียนการจัดการข้อผิดพลาดโดยที่ข้อมูลนี้จะเป็นจริง นำมาใช้ในระบบ
วิทยาศาสตร์สมัยใหม่ของการออกแบบประสบการณ์ผู้ใช้พูดถึงเรื่องนี้อย่างไร ประการแรกชัดเจน (ฉันไม่รู้ว่าใครและเมื่อใด แต่เมื่อนานมาแล้วอย่างแน่นอนดูและ) ว่าท้ายที่สุดแล้วโปรแกรมกำลังได้รับการพัฒนาสำหรับผู้ใช้ ในแง่นี้ โปรแกรมเมอร์ไม่ได้กำหนดเงื่อนไขอีกต่อไป แต่สร้างผลิตภัณฑ์ที่เป็นประโยชน์อย่างแท้จริงอย่างสุภาพ ซึ่งเป็นเครื่องมือที่ผู้คนจะใช้ในการแก้ปัญหา ของพวกเขางานและความสำเร็จ ของพวกเขาเป้าหมาย เหมือนเตารีด - หากคุณต้องการรีดบางสิ่ง คุณก็เปิดมันขึ้นมา หากเขาเสนอให้ดาวน์โหลดการอัพเดตจากอินเทอร์เน็ตแทนที่จะรีดผ้าก็ชัดเจนว่าเหล็กดังกล่าวจะบินไปที่ใด Alan Cooper แนะนำให้นำเสนอผู้ใช้ผลิตภัณฑ์ของคุณว่าเป็นคนที่ฉลาดแต่ยุ่งมาก พวกเขากล่าวว่าไม่โง่และจะเข้าใจวิธีใช้ผลิตภัณฑ์ของคุณ สิ่งสำคัญคือคุณไม่ขวางทางพวกเขา
โดยทั่วไป ฉันคิดว่าโปรแกรมเมอร์ทุกคน (นักออกแบบ ผู้จัดการ นักวิเคราะห์) ควรทำสมาธิตามที่ Sergey Bodrov Jr. กล่าวถึง:
คุณยืนอยู่ตรงหัวมุมถนนอันพลุกพล่านและแสร้งทำเป็นว่าคุณไม่ได้อยู่ที่นั่น จริงๆ แล้ว คุณไม่มีอยู่จริงเลย คนเดินเท้ากำลังเดิน รถบีบแตร ประตูร้านค้ากำลังเปิด ผู้โดยสารเปลี่ยนเสื้อผ้าที่ป้ายรถเมล์ โดยหลักการแล้ว โลกจะคงอยู่ต่อไปโดยไม่มีคุณ มันเจ็บที่จะเข้าใจ แต่มันสำคัญ...
แน่นอนฉันไม่อยากจะพูดเลยว่าโปรแกรมเมอร์เป็นอาชีพที่ไม่จำเป็น ตัวฉันเองเป็นโปรแกรมเมอร์และฉันก็ไม่คิดอย่างนั้นเลย มันเป็นเพียงงานที่ไม่เห็นคุณค่า จะไม่มีใครมาชื่นชมอัลกอริธึมที่มีการใช้งานอย่างดี หากโปรแกรมดีก็จะใช้งานได้โดยไม่มีคำถามเพิ่มเติม นั่นเป็นวิธีที่ควรจะเป็น เพียงเพื่อที่จะเป็นโปรแกรมเมอร์ คุณต้องคุ้นเคยกับมันก่อน และคนเหล่านี้ที่เดินไปตามถนนและเปลี่ยนเสื้อผ้าที่ป้ายรถเมล์คือผู้ใช้ของคุณ พวกเขาใช้สิ่งต่าง ๆ ในแบบที่เป็น พวกเขาจำเป็น รวมไปถึงสินค้าของคุณด้วย ไม่มีคุณ. พวกเขาไม่รู้อะไรเกี่ยวกับคุณเลย พวกเขาไม่อยากรู้ และพวกเขาจะไม่มีวันรู้เลย Sergey Vitalyevich เมื่อเขาพยายามผลักดันการอ่านที่นำมาจากมิเตอร์เข้าสู่ระบบในทุ่งทุนดราขั้วโลก เขาไม่สนใจเลยว่าทำไมระบบถึงบอกเขาว่าก่อนอื่นคุณต้องระบุภาษีบางประเภท แม้ว่าในเวลานั้น ดูเหมือนว่าการออกแบบจะขาดไม่ได้หากไม่มีประเภทภาษี สำหรับตัวอย่างเกี่ยวกับการดาวน์โหลดการอัปเดตเหล็กนั้นไม่ได้ถูกพรากไปจากนิ้วเลย - โปรดใส่ใจกับพฤติกรรมของเบราว์เซอร์ Firefox เมื่อคุณเปิดใช้งาน จะมีอะไรเกี่ยวกับช่องที่ต้องกรอกหรือไม่ Habrauser จะถามหรือไม่? มันจะเริ่มทันที
ประเด็นก็คือโลกแห่งความเป็นจริงของเราไม่ใช่แบบจำลองทางคณิตศาสตร์ ซึ่งพารามิเตอร์ต่างๆ สามารถทราบได้ตลอดเวลา ชีวิตจริงมีลักษณะเฉพาะคือการขาดข้อมูลมากกว่าการมีอยู่ บุคคลที่กรอกแบบฟอร์มอาจไม่มีข้อมูลที่จำเป็น - และพวกเขาอาจไม่สามารถเข้าถึงได้ทั้งหมดซึ่งก็คือไม่เป็นเช่นนั้นในที่สุด ปัญหานี้ไม่สามารถแก้ไขได้โดยเพียงแค่ทำให้ฟิลด์ที่ต้องการ - ค่าจะไม่ถูกนำมาจากอากาศบาง ๆ จริงๆ แล้วเราแนะนำช่องบังคับในแบบฟอร์มเพื่อความสมบูรณ์และความสมบูรณ์ของข้อมูล รบกวนการใช้งานระบบ. เมื่อเผชิญกับสถานการณ์ดังกล่าว ผู้ใช้จะไม่กรอกแบบฟอร์ม (และจะไม่สามารถทำงานกับระบบได้เลย) หรือจะกรอกข้อมูลที่ขาดหายไปด้วยปลา - ข้อมูลสมมติหรือข้อมูลที่ไม่มีความหมาย และนี่ไม่ได้บ่งชี้ว่าผู้ใช้ไม่ดีหรือพยายามไม่ดี แต่เพียงแต่ว่าระบบที่พัฒนาขึ้นเท่านั้น ไม่ยืดหยุ่นเพียงพอเพื่อใช้ในสภาวะต่างๆ จริงความสงบ. สิ่งที่เกิดขึ้นในกรณีที่สอง (การนำปลาเข้ามา) โดยทั่วไปถือเป็นเรื่องหลอกลวง ผู้ออกแบบระบบสามารถแสร้งทำเป็นว่าทุกอย่างเป็นไปตามลำดับได้มากเท่าที่ต้องการ แต่ในความเป็นจริงแล้วเขาคือผู้ที่ต้องตำหนิการหลอกลวงนี้ ยิ่งไปกว่านั้นยังไม่ชัดเจนว่าใครและอะไรชนะโดยทั่วไป - ผู้ใช้มีอาการปวดหัวและข้อมูลไม่ถูกต้องเข้าสู่ระบบ ใช่ พวกเขาทำในลักษณะที่ไม่สามารถตรวจจับ กรอง หรือล้างข้อมูลโดยอัตโนมัติได้อีกต่อไป ตรงกันข้ามกับกรณีที่ผู้ใช้เพียงระบุว่าข้อมูลขาดหายไป
จะทำอย่างไร? ทำโปรแกรมดีๆ. กล่าวคือใช่ อย่าให้ความสำคัญกับความสมบูรณ์ของสคีมาฐานข้อมูลเป็นอันดับแรก แต่ให้วางเป้าหมายและงานของผู้ใช้ไว้ที่นั่น กล่าวอีกนัยหนึ่งคือ การยอมรับข้อมูลที่ไม่สมบูรณ์และในบางกรณีไม่ถูกต้องจากผู้ใช้ แน่นอนว่ามีความเป็นไปได้ที่จะแก้ไขในอนาคต ตรงกันข้ามกับความเข้าใจผิด (ใช่ อีกข้อหนึ่ง) เป็นไปได้ ไม่ยาก และมันก็ได้ผลด้วยซ้ำ นอกจากนี้คุณยังต้องช่วยเหลือบอกผู้ใช้ว่าข้อมูลอะไรและเหตุใดเขาจึงขาด เพื่อดูและควบคุมสถานการณ์
แบบฟอร์มต้องมีช่องที่ต้องกรอกจำนวนเท่าใด เป็นการดีที่ศูนย์ สิ่งนี้เป็นไปได้เสมอหรือไม่? สำหรับฉัน ตัวอย่างหนึ่งของการแสดงผาดโผนคือการสร้างโฟลเดอร์ใน Windows ดูเหมือนว่าคุณไม่สามารถทำฟิลด์ได้น้อยกว่าหนึ่งฟิลด์ที่นี่ แต่ไม่ พวกเขาจัดการเพื่อใช้การสร้างเพื่อให้ระบบไม่ถามอะไร - แม้ว่าข้อจำกัดทางเทคนิคจะไม่อนุญาตให้ระบบสร้างโฟลเดอร์โดยไม่มีชื่อ . นี่คืออุดมคติที่จะมุ่งมั่น
โดยปกติแล้ว ระบบควรจะมีความชาญฉลาดน้อยที่สุด โดยถามผู้ใช้เฉพาะสิ่งที่เกี่ยวข้องกับงานของผู้ใช้เท่านั้น ไม่ใช่ความต้องการของระบบเอง ระบบก็เหมือนเครื่องมือจำได้ไหม? ตัวอย่างเกี่ยวกับ Firefox - ตัวอย่างเช่น Google Chrome แก้ไขปัญหาของ Firefox โดยอัปเดตอย่างเงียบ ๆ ในขณะที่ผู้ใช้รีบูต ผู้ใช้ไม่จำเป็นต้องรู้เรื่องนี้เลย - เขาไม่รู้ ตัวอย่างอันควรค่าแก่การติดตาม บอกตรงๆ ตอนแรกฉันไม่เข้าใจด้วยซ้ำ ด้วยเหตุผลบางอย่างเขาไม่เคยถามฉันว่าควรอัปเดตเมื่อใด
นอกจากนี้ยังมีตำนานเกี่ยวกับสาขาสำคัญ (สิ่งเหล่านี้เป็นทางเลือก แต่เป็นที่ต้องการสำหรับการกรอก) ง่ายกว่านี้อีก - คุณไม่สามารถบังคับให้กรอกข้อมูลในฟิลด์ได้ ดังนั้น อย่างน้อยก็ทำเครื่องหมายในช่องนั้นว่าจำเป็น อย่างน้อยก็ไม่ต้องทำเครื่องหมาย - พวกเขาจะยังคงเขียนเรื่องไร้สาระ ยกเลิกการสมัครหากพวกเขาไม่ต้องการกรอกข้อมูล ไม่มีวิธีแก้ไขปัญหาอินเทอร์เฟซสำหรับปัญหานี้ ความสำคัญของภาคสนามจะต้องถ่ายทอดไปยังเจ้าหน้าที่ภาคสนาม และนักพัฒนาควรทำเครื่องหมายฟิลด์นี้ว่าไม่บังคับ และให้ฉันแก้ไข
วรรณกรรม:
- Alan Cooper บนอินเทอร์เฟซ พื้นฐานการออกแบบปฏิสัมพันธ์ ซิมโบลพลัส, 2552
- เจฟฟ์ ราสกิน. Interface: ทิศทางใหม่ในการออกแบบระบบคอมพิวเตอร์ ซิมโบลพลัส, 2548
อัปเดต:ในความคิดเห็น Trijin และ zhindetz ได้กำหนดคุณธรรมหลักของหัวข้อให้ชัดเจนยิ่งขึ้น: เรากำลังพูดถึงระบบร่างเกี่ยวกับการลบข้อกำหนดในการป้อนข้อมูลทั้งหมดในคราวเดียวและสม่ำเสมอ นั่นคือใช่ ทำให้เป็นทางเลือกแม้แต่ฟิลด์เหล่านั้นโดยที่ระบบจะไม่ทำงาน โดยปกติแล้วมันจะไม่ทำงาน แต่อย่างน้อยก็ปล่อยให้มันบันทึกข้อมูล
อัปเดต #2:ฉันจะชี้แจงอีกสิ่งหนึ่งที่ฉันเองไม่เข้าใจอย่างชัดเจนเมื่อฉันเขียนหัวข้อ ฉันไม่ได้พูดถึงความเหมาะสมของบางฟิลด์ในแบบฟอร์มที่นี่ (นี่เป็นหัวข้อสำคัญ แต่ยังคงเป็นหัวข้อที่แตกต่างจากที่ฉันต้องการสื่อเล็กน้อย) แต่ฉันเสนอให้คิดใหม่เกี่ยวกับแนวคิดของการป้อนข้อมูลโดยใช้แบบฟอร์ม ซึ่งเป็นแนวทางดั้งเดิมเมื่อคุณต้องการกรอกแบบฟอร์มทั้งหมดในครั้งเดียวและถูกต้อง แต่ฉันขอเสนอสถานะระดับกลาง (ไม่สมบูรณ์ ไม่ถูกต้อง ไม่สอดคล้องกัน) ให้เก็บไว้ในฐานข้อมูลแทน ระบุสถานะดังกล่าวอย่างชัดเจนว่าไม่สมบูรณ์/ไม่ถูกต้อง/ไม่สอดคล้องกัน. ดังนั้น ทุกสถานการณ์ “ตอนนี้ฉันไม่รู้ทุกอย่าง แต่พรุ่งนี้ บางทีฉันอาจจะได้รู้” ซึ่งตามธรรมเนียมแล้วแก้ไขได้ด้วยการเขียนลงบนกระดาษ สามารถประมวลผลได้โดยใช้ระบบข้อมูล โดยปกติแล้ว ข้อมูลดังกล่าวไม่ควรได้รับอนุญาตให้เข้าสู่กระบวนการทางธุรกิจเนื่องจากความไม่ถูกต้อง - ทุกอย่างยังคงอยู่เหมือนเมื่อก่อน พวกเขาจะนอนอยู่ในฐานข้อมูลจนกว่าจะถึงเวลาที่ดีกว่า - มันจะไม่มีประโยชน์ ขอพระเจ้าอวยพรพวกเขา
ไซต์สมัยใหม่และไซต์ใหม่เกือบทั้งหมดมีแบบฟอร์มที่ตรวจสอบการกรอกโดยไม่ต้องโหลดหน้าซ้ำ ฟิลด์แบบฟอร์มที่จำเป็นที่เรียกว่า แต่วิธีการใดที่ใช้ในการสร้างแบบฟอร์มดังกล่าว?
จนกระทั่งเมื่อเร็ว ๆ นี้ วิธีที่ได้รับความนิยมมากที่สุดคือการใช้จาวาสคริปต์ ไลบรารีที่มีประโยชน์มากคือการตรวจสอบ jquery วิธีการนี้เป็นวิธีการที่ทันสมัย แต่การบูรณาการเข้ากับแบบฟอร์มบนเว็บไซต์ต้องใช้ทักษะและเวลา
กับการเสด็จมา HTML5และการบูรณาการอย่างแพร่หลายเข้ากับไซต์สมัยใหม่ คุณสามารถปฏิเสธที่จะใช้จาวาสคริปต์ได้ ในเวลาเดียวกัน คุณจะต้องเพิ่มฟิลด์ในแบบฟอร์มเท่านั้น คุณลักษณะที่จำเป็น
ด้วยแอตทริบิวต์ที่จำเป็น เบราว์เซอร์จะตรวจสอบว่าได้กรอกข้อมูลในช่องใดช่องหนึ่งหรือไม่ก่อนส่งแบบฟอร์ม ถ้าไม่เช่นนั้น ผู้ใช้จะถูกพาไปยังการกรอกข้อมูลที่จำเป็นในฟิลด์หรือแม้แต่ทุกฟิลด์ในแบบฟอร์ม
และจะใช้เวลาไม่เกินหนึ่งนาทีในการสร้างฟิลด์ดังกล่าว
สมมติว่าเรามีรูปแบบเล็กๆ:
การลงทะเบียน
นี่คือลักษณะที่ปรากฏในเบราว์เซอร์:
ตอนนี้เราสร้างฟิลด์บางฟิลด์ในรูปแบบบังคับ:
การลงทะเบียน
นั่นคือทั้งหมดที่ เรากำหนดให้ทุกฟิลด์บังคับในเวลาไม่ถึง 1 นาที หากคุณไม่กรอกข้อมูลในช่องที่ต้องกรอก เราจะเห็นข้อความต่อไปนี้:
และที่สำคัญ การตรวจสอบนี้ใช้ได้กับเบราว์เซอร์รุ่นใหม่ทั้งหมดและเฉพาะกับข้อกำหนด html 5 เท่านั้น สำหรับผู้ที่ไม่ได้ฝึกหัด - ที่จุดเริ่มต้นของโค้ด html คุณต้องใส่แท็ก.
ข้าว. 1. ปรับปรุงเว็บฟอร์มด้วย HTML5