แท็กปุ่มลืม

สำหรับโปรแกรมเมอร์ทุกคนการให้ผู้ใช้มีอินเทอร์เฟซแบบครบวงจรเป็นข้อกำหนดที่ไม่เปลี่ยนแปลง อย่างไรก็ตามมันเป็นเรื่องยากโดยเฉพาะอย่างยิ่งที่จะบรรลุการรวมรูปแบบนี้บนหน้าเว็บเนื่องจากมีความแตกต่างในวิธีการที่ระบบปฏิบัติการและเบราว์เซอร์แสดงเนื้อหาหน้าเว็บที่แตกต่างกันและความแตกต่างนี้เกือบจะผิดปกติ ปัญหานี้โดดเด่นเป็นพิเศษในกระบวนการประมวลผลองค์ประกอบ สิ่งที่ทำให้คนจำนวนมากทำอะไรไม่ถูกคือปัญหามาตรฐานการแสดงแบบครบวงจรของปุ่มส่ง

ตัวอย่างเช่นแท็กอินพุตที่มีแอตทริบิวต์ Type = Subment นั้นดูน่าเกลียดมากในเบราว์เซอร์ที่แตกต่างกัน (ใน Firefox) หรือมีข้อบกพร่องประเภทหนึ่ง (ใน Internet Explorer) หรือแม้กระทั่งทำหน้าที่แข็งมาก (ใน Safari) การแก้ปัญหานี้มักจะตั้งค่าคุณสมบัติอินพุตเป็นภาพแล้วออกแบบภาพปุ่มด้วยตัวเอง แต่เราต้องเพิ่มงานที่น่ารำคาญเป็นพิเศษทุกครั้งที่เราต้องใช้ปุ่ม ดังนั้นเราต้องการวิธีแก้ปัญหาที่ดีกว่าวิธีที่ยืดหยุ่นและมีความหมายมากขึ้นสำหรับนักออกแบบ โชคดีที่วิธีนี้มีอยู่แล้วในความเป็นจริงและสิ่งที่เราต้องการคือการทำงานเพิ่มอีกเล็กน้อย เพื่อนโปรดให้เราแนะนำเพื่อนน้อยน่ารักของเราเพื่อนร่วมชั้น <ปุ่ม>!

ปุ่มอินพุต vs

นี่คือฉลากปุ่มส่งที่คุณใช้:

<ประเภทอินพุต = ส่งค่า = ส่ง />

รูปแบบการแสดงของพวกเขาในเบราว์เซอร์ที่แตกต่างกันมีดังนี้:

และเมื่อเราใช้ <Button> เพื่อสร้างปุ่มดังกล่าวข้างต้น:

<button type = submit> ส่ง </button>

พวกเขาจะแสดงออกในรูปแบบต่อไปนี้:

ปุ่มเหล่านี้ไม่แตกต่างจากปุ่มที่เราสร้างไว้ข้างต้นในพฤติกรรมการทำงานและการนำเสนอ นอกเหนือจากการใช้พวกเขาเพื่อส่งแบบฟอร์มแล้วคุณยังสามารถตั้งค่าให้ไม่สามารถใช้งานได้เพิ่มทางลัดหรือตั้งค่า tabindex ฯลฯ โชคดีที่นอกเหนือจากรูปแบบการแสดงออกที่แตกต่างกัน Safari รองรับฟังก์ชั่นเหล่านี้ (เปรียบเทียบกับปุ่มอินพุตปุ่มปุ่มใน Safari ขาด ฟังก์ชั่นที่เจ๋งที่สุดของแท็ก <button> คือเราสามารถวางองค์ประกอบ HTML ที่มีประโยชน์ไว้ข้างในเช่นการเพิ่มรูปภาพโดยใช้รหัสต่อไปนี้:

<button type = submit> <img src = alt = /> ส่ง < /button>

การปรากฏตัวของพวกเขาในเบราว์เซอร์มีดังนี้:

ไม่เลว ในความเป็นจริงตามคำจำกัดความของ W3C องค์ประกอบ <button> ได้เข้ามาเพื่อแก้ปัญหาความแตกต่างของประสิทธิภาพเหล่านี้

ปุ่มที่สร้างขึ้นด้วยฟังก์ชั่นองค์ประกอบปุ่มเช่นเดียวกับปุ่มที่สร้างขึ้นด้วยองค์ประกอบอินพุต แต่มันมีความเป็นไปได้ในการเรนเดอร์ที่สมบูรณ์ยิ่งขึ้น: องค์ประกอบปุ่มอาจมีเนื้อหา ตัวอย่างเช่นองค์ประกอบปุ่มที่มีฟังก์ชั่นรูปภาพเช่นและอาจคล้ายกับองค์ประกอบอินพุตที่มีการตั้งค่าประเภทเป็นภาพ แต่ประเภทองค์ประกอบปุ่มอนุญาตให้เนื้อหา

องค์ประกอบปุ่ม - W3C

ดังนั้นเราจำเป็นต้องค้นหาวิธีการออกแบบสำหรับสิ่งนี้และโชคดีที่อินเทอร์เน็ตที่มีข้อมูลขนาดใหญ่สามารถให้ความช่วยเหลือที่เป็นประโยชน์แก่เราในการแก้ปัญหานี้ นี่เป็นสิ่งที่สะดวกมาก แต่น่าเสียดายที่นักออกแบบและนักพัฒนาเว็บไซต์ไม่รู้จักการมีอยู่ขององค์ประกอบนี้ ก่อนที่ฉันจะตัดสินใจแทนที่ Wufoo ด้วยองค์ประกอบปุ่ม (ผลิตภัณฑ์เครือข่ายของบทความนี้ Dudo Note) ฉันต้องแน่ใจว่าแท็กและ CSS นี้สามารถตอบสนองความต้องการดังต่อไปนี้:

ความต้องการ:

1. พวกเขาจะต้องมีรูปลักษณ์ของปุ่ม

2. มีสไตล์การแสดงออกเหมือนกันในเบราว์เซอร์ที่แตกต่างกัน

3. รูปแบบที่ใช้ในปุ่มยังสามารถใช้กับไฮเปอร์ลิงก์ (เนื่องจากการโต้ตอบใน Wufoo ใช้วิธีการส่งแบบฟอร์มเสมอและเชื่อมโยงการติดต่อเพื่อส่งวิธี Ajax พวกเขาอาจอยู่ใกล้กันดังนั้นฉันจึงต้องการให้มีสไตล์การแสดงออกเหมือนกัน)

4. แท็กสามารถยืดหยุ่นและปรับเปลี่ยนได้ง่ายภายใต้สถานการณ์ที่แตกต่างกัน

5. สำหรับเหตุการณ์ที่เกิดขึ้นระหว่างการส่งข้อมูลคุณสามารถแยกแยะความแตกต่างได้อย่างมีประสิทธิภาพด้วยไอคอนและสี

ต้องเผชิญกับปัญหาข้างต้นฉันเขียน CSS ก่อนแล้วแก้ไขปัญหาข้ามเบราว์เซอร์ ต่อไปเราจะเห็น:

ไม่มีอะไรที่จะทำให้เอะอะเกี่ยวกับเรื่องนี้มันง่ายมาก แต่ก็มีประสิทธิภาพมาก เหตุผลที่ฉันชอบใช้วิธีนี้และปุ่มจัดการนี้เป็นเพราะฉันไม่ต้องเริ่มต้นการสร้าง Photoshop ทีละตัวเพื่อสร้างไอคอน 10,000 รายการ หากเราดูรหัสอย่างระมัดระวังคุณจะพบว่าปุ่มสองปุ่มที่อยู่ด้านหลังเป็นลิงค์สองลิงก์

<div class = ปุ่ม>

<button type = ส่ง class = positive>

<img src =/images/icons/tick.png alt =/>

บันทึก

</kout>

<a href =/รหัสผ่าน/รีเซ็ต/

<img src =/images/icons/textfield_key.png alt =/>

เปลี่ยนรหัสผ่าน

</a>

<a href =# class = ลบ>

<img src =/images/icons/cross.png alt =/>

ยกเลิก

</a>

</div>

จุดประสงค์ของสิ่งนี้เป็นเพราะการกระทำหลายอย่างในเว็บแอปพลิเคชันคือเหตุการณ์ (REST) ​​ขับเคลื่อนดังนั้นการส่งคำขอผู้ใช้ผ่าน URL เฉพาะสามารถเริ่มต้นการกระทำเหล่านี้ได้ การใช้สไตล์ที่สามารถนำไปใช้กับองค์ประกอบทั้งสองทำให้การรวมกันของเรามีความยืดหยุ่นมากขึ้นเมื่อคงไว้ซึ่งการโต้ตอบที่เกิดจาก AJAX และปุ่มส่งมาตรฐาน

ตอนนี้คุณอาจถามว่าทำไมฉันถึงทิ้งแอตทริบิวต์ alt ขององค์ประกอบภาพไว้ว่างเปล่า? Alt เป็นคุณลักษณะที่จำเป็นขององค์ประกอบ IMG มันถูกใช้เพื่ออธิบายเนื้อหาของภาพ แต่ไม่มีคำอธิบายที่เกี่ยวข้องของภาพที่นี่ซึ่งเป็นความสับสนเล็กน้อย อย่างไรก็ตามไม่เหมือนกับแอตทริบิวต์ที่ขาดหายไปค่าแอตทริบิวต์ที่ว่างเปล่านั้นสอดคล้องกับมาตรฐานอย่างสมบูรณ์ เขาบอกกับเบราว์เซอร์ว่าภาพเหล่านี้แสดงถึงข้อมูลที่ไม่สำคัญบางอย่างซึ่งป้องกันไม่ให้เบราว์เซอร์ไม่สามารถค้นหาปุ่มถัดไปได้เนื่องจากการบดเคี้ยวของข้อมูลแจ้ง เนื่องจากไอคอนที่นี่ซ้ำซ้อนอย่างสมบูรณ์เราจึงไม่ต้องเสียเวลาในการดูไอคอนนี้ที่ใช้ทั้งหมดเพื่อให้ได้รูปแบบอินเทอร์เฟซแบบครบวงจร

เนื้อหา CSS ส่วนใหญ่ที่ใช้ในการควบคุมรูปแบบปุ่มเหล่านี้ใช้งานง่ายมาก ความแตกต่างเล็กน้อยในเบราว์เซอร์ที่แตกต่างกันจะนำไปสู่การประยุกต์ใช้ค่าการขยายที่แตกต่างกันสำหรับพวกเขาในรหัสต่อไปนี้ โชคดีที่ทั้งหมดนี้เป็นไปได้อย่างสมบูรณ์

/ * ปุ่ม *//

.buttons a,. buttons ปุ่ม {

แสดง: บล็อก;

ลอย: ซ้าย;

มาร์จิ้น: 0 7px 0 0;

พื้นหลังสี:#F5F5F5;

ชายแดน: 1px Solid #Dedede;

ชายแดนด้านบน: 1px Solid #EEE;

ชายแดนซ้าย: 1px Solid #EEE;

Font-Family: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;

ขนาดตัวอักษร: 100%;

ความสูงของสาย: 130%;

การตกแต่งข้อความ: ไม่มี;

Font-Weight: ตัวหนา;

สี:#565656;

เคอร์เซอร์: ตัวชี้;

Padding: 5px 10px 6px 7px; / * ลิงค์ */

-

ปุ่ม. ปุ่ม {

ความกว้าง: อัตโนมัติ;

ล้น: มองเห็นได้;

Padding: 4px 10px 3px 7px; / * IE6 */

-

ปุ่ม. ปุ่ม [พิมพ์] {

Padding: 5px 10px 5px 7px; / * Firefox */

ความสูงของสาย: 17px; / * Safari */

-

*: ปุ่ม HTML เด็กแรก [ประเภท] {

Padding: 4px 10px 3px 7px; / * IE7 */

-

ปุ่ม. ปุ่ม img, .buttons a img {

มาร์จิ้น: 0 3px -3px 0! สำคัญ;

Padding: 0;

ชายแดน: ไม่มี;

ความกว้าง: 16px;

ความสูง: 16px;

-

ปัญหาอีกประการหนึ่งคือมีข้อบกพร่องบางอย่างใน Internet Explorer เมื่อแสดงปุ่มยาว คุณสามารถค้นหาข้อมูลนี้เกี่ยวกับ jehiah.cz แต่ในรหัส CSS ข้างต้นเราจะหลีกเลี่ยงปัญหาในระดับหนึ่งโดยการประกาศค่าของความกว้างและการล้น

ใน Wufoo เราตั้งค่าโฮเวอร์ของการกระทำที่เป็นกลาง (ที่นี่ผู้เขียนเรียกรหัสผ่านการเปลี่ยนแปลงและการกระทำอื่น ๆ เป็นการกระทำที่เป็นกลางการยืนยันและประเภทการส่งเป็นการกระทำที่เป็นบวกและประเภทการละทิ้งและการยกเลิกเป็นการกระทำเชิงลบ) เป็นสีน้ำเงินและการกระทำเชิงบวกและการกระทำเชิงลบถูกกำหนดเป็นสีเขียวและสีแดงตามลำดับ รหัสสไตล์ต่อไปนี้ใช้สีที่แตกต่างกันเพื่อแยกความแตกต่างระหว่างการเพิ่มการบันทึกและการยกเลิกและการลบประเภทของการกระทำเชิงลบ มันให้ความรู้สึกค่อนข้างดีแน่นอนว่าคุณสามารถเลือกสีที่คุณต้องการใช้

/* มาตรฐาน */

ปุ่ม: โฮเวอร์, .buttons a: โฮเวอร์ {

พื้นหลังสี:#DFF4FF;

ชายแดน: 1px Solid #C2E1EF;

สี:#336699;

-

.Buttons A: ใช้งาน {

พื้นหลังสี:#6299C5;

ชายแดน: 1px Solid #6299C5;

สี: #FFFF;

-

/* เชิงบวก */

button.positive, .buttons a.positive {

สี:#529214;

-

.Buttons A.Positive: Hover, Button.positive: Hover {

พื้นหลังสี:#e6efc2;

ชายแดน: 1px Solid #C6D880;

สี:#529214;

-

.Buttons A.Positive: ใช้งาน {

พื้นหลังสี:#529214;

ชายแดน: 1px Solid #529214;

สี: #FFFF;

-

/* เชิงลบ */

.Buttons A.Negative, ปุ่มลบ {

สี:#D12F19;

-

.Buttons A.Negative: Hover, Button.Negative: Hover {

ความเป็นมา:#FBE3E4;

ชายแดน: 1px Solid #FBC2C4;

สี:#D12F19;

-

.Buttons A.Negative: ใช้งาน {

พื้นหลังสี:#D12F19;

ชายแดน: 1px Solid #D12F19;

สี: #FFFF;

-

ในที่สุดนี่เป็นเพียงวิธีแก้ปัญหาที่เราออกแบบมาเพื่อจัดการกับความต้องการใน Wufoo แต่มันทำงานได้ดีกับความพยายามของเรา แต่นั่นไม่ใช่วิธีเดียวที่คุณสามารถหาวิธีที่น่าสนใจมากขึ้นในการเปลี่ยนปุ่มให้กลายเป็นมุมโค้งมนหรือมีสีสันมากขึ้น เนื่องจากองค์ประกอบอื่น ๆ เกือบทุกอย่างสามารถวางไว้ระหว่างแท็ก <button> คุณยังสามารถสร้างปุ่มสามมิติที่ดูดีอย่างแท้จริงโดยการแทรกแท็ก <span> และทำตามวิธีการล่าสุดโดย Alex Griffioen พูดตามตรงฉันหวังว่านี่เป็นเพียงจุดเริ่มต้นสำหรับนักออกแบบทุกคนที่ทำงานเพื่อนำอินเทอร์เฟซของโปรแกรมกลับมาใช้ซ้ำ อย่างไรก็ตามฉันหวังว่าคุณจะสามารถคิดเพิ่มเติมเกี่ยวกับเรื่องนี้ก่อนที่จะเปิดปุ่มอินพุตของ Photoshop และดูแท็ก <button> ที่ลืมไปแล้วว่ามันอาจจะทำให้คุณประหลาดใจ

กำหนดปุ่ม ภายในองค์ประกอบปุ่มคุณสามารถวางเนื้อหาเช่นข้อความหรือรูปภาพ นี่คือความแตกต่างระหว่างองค์ประกอบนี้และปุ่มที่สร้างขึ้นด้วยองค์ประกอบอินพุต

ตัวควบคุม <putton> ให้คุณสมบัติที่ทรงพลังกว่าและเนื้อหาที่สมบูรณ์กว่า <อินพุตประเภท = ปุ่ม> เนื้อหาทั้งหมดระหว่างแท็ก <button> และ </duct> เป็นเนื้อหาของปุ่มซึ่งรวมถึงเนื้อหาของร่างกายที่ยอมรับได้เช่นข้อความหรือเนื้อหามัลติมีเดีย ตัวอย่างเช่นเราสามารถรวมรูปภาพและข้อความที่เกี่ยวข้องในปุ่มและใช้เพื่อสร้างภาพมาร์กอัปที่น่าสนใจในปุ่ม

องค์ประกอบเดียวที่ต้องห้ามคือการแมปรูปภาพเนื่องจากการกระทำของเมาส์และคีย์บอร์ดที่ไวต่อการกระทำสามารถรบกวนพฤติกรรมของปุ่มฟอร์ม

ปิดใช้งานปิดใช้งานปิดใช้งานปิดใช้งานปุ่มนี้ STF

NAMEBUTTON_NAME ระบุชื่อที่ไม่ซ้ำกันของปุ่มนี้ STF

พิมพ์ปุ่ม*

* รีเซ็ตกำหนดประเภทของปุ่ม STF

* ส่ง

ค่า some_value ระบุค่าเริ่มต้นของปุ่ม ค่านี้สามารถแก้ไขได้โดยสคริปต์ STF

ID, คลาส, ชื่อ, สไตล์, dir, lang, xml: lang, accesskey, tabindex

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup