หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

Html-แบบฟอร์ม

คลาส PHP น้ำหนักเบาเพื่อสร้างองค์ประกอบ html

แพ็คเกจนี้ไม่มีการพึ่งพาใด ๆ นอกเหนือจาก php-5.4

  • ใบอนุญาต: เอ็มไอที

ความต้องการ

  • PHP 5.4.0 หรือสูงกว่า

การติดตั้ง

ผู้แต่ง

Composer เป็นตัวจัดการการพึ่งพาที่ใช้กันอย่างแพร่หลายสำหรับแพ็คเกจ PHP แบบฟอร์ม Html นี้มีอยู่ใน Packagist ในชื่อ user-meta/html และสามารถติดตั้งได้โดยการรันคำสั่ง composer require หากต้องการเปิดใช้งาน Composer สำหรับโปรเจ็กต์ของคุณ โปรดดูเอกสารประกอบการเริ่มต้นของโปรเจ็กต์

หากต้องการเพิ่มการพึ่งพานี้โดยใช้คำสั่ง ให้รันสิ่งต่อไปนี้จากภายในไดเร็กทอรีโปรเจ็กต์ของคุณ: 

 composer require user-meta/html

เริ่มต้นเลย

ตัวอย่างสั้นๆ ของการสร้างการป้อนข้อความด้วย Html-Form โดยใช้ผู้แต่ง: 

 <?php
require __DIR__ . ' /vendor/autoload.php ' ;
use UserMeta  Html  Html ;
echo Html:: text ( ' example ' );

เอาท์พุท: 

 < input type =" text " value =" example " />

สามารถใช้องค์ประกอบ html เกือบทุกประเภท (เช่น ปุ่ม, อีเมล, div, p ฯลฯ) 

 echo Html:: button ( ' Submit Me ' );
echo Html:: email ( ' example email ' );
echo Html:: div ( ' example text ' );
echo Html:: p ( ' example text ' );

เอาท์พุท: 

 < input type =" button " value =" Submit Me " />
< input type =" email " value =" example email " />
< div > example text </ div >
< p > example text </ p >

การใช้งาน

การใช้งานขั้นพื้นฐาน

ข้อโต้แย้งที่ยอมรับ

องค์ประกอบส่วนใหญ่ยอมรับสองข้อโต้แย้ง:

  • $default : ค่าเริ่มต้น
  • $attributes : อาร์เรย์ของแอตทริบิวต์
  • echo Html::text($default, attributes);

สำหรับองค์ประกอบตัวเลือกเช่น select, radio จะยอมรับอาร์กิวเมนต์ที่สามเป็น $options

  • $options : อาร์เรย์ของตัวเลือก อาร์เรย์สามารถมีคู่คีย์-ค่าหรือเฉพาะค่าเท่านั้น
  • echo Html::select($default, attributes, $options);

โดยใช้ชื่อ ไอดี และคลาส

ในการกำหนดชื่อ, รหัส, คลาสหรือคุณลักษณะอื่น ๆ ให้ใช้อาร์กิวเมนต์ที่สอง ( $attributes )

ช่องข้อความที่มีค่าเริ่มต้น ชื่อ รหัส และแอตทริบิวต์คลาส: 

 echo Html:: text ( ' Example_Value ' , [ ' name ' => ' Example_Name ' , ' id ' => ' Example_ID ' , ' class ' => ' Example_Class ' ]);

เอาท์พุท: 

 < input type =" text " name =" Example_Name " value =" Example_Value " id =" Example_ID " class =" Example_Class " />

เพิ่มคุณสมบัติให้กับองค์ประกอบ

คุณยังสามารถเพิ่มแอตทริบิวต์ใด ๆ ลงในองค์ประกอบใดก็ได้: 

 echo Html:: text ( ' Example_Value ' , [ ' name ' => ' Example_Name ' , ' data-example ' => ' Example_Data ' ]);

เอาท์พุท: 

 < input type =" text " name =" Example_Name " value =" Example_Value " data-example =" Example_Data " />

ใช้จำเป็น อ่านอย่างเดียว และปิดใช้งาน 

 echo Html:: email ( null , [ ' name ' => ' Email ' , ' required ' ]);
echo Html:: email ( null , [ ' name ' => ' Email ' , ' readonly ' ]);
echo Html:: email ( null , [ ' name ' => ' Email ' , ' disabled ' ]);

เอาท์พุท: 

 < input type =" email " name =" Email " required =" required " />
< input type =" email " name =" Email " readonly =" readonly " />
< input type =" email " name =" Email " disabled =" disabled " />

การใช้ฉลาก 

 echo Html:: email ( null , [
    ' name ' => ' Example_Name ' ,
    ' label ' => ' Email '
]);
 echo Html:: email ( null , [
    ' name ' => ' Example_Name ' ,
    ' label ' => [
        ' Example ' ,
        ' class ' => ' Class '
    ]
]);

เอาท์พุท: 

 < label > Email </ label >
< input type =" email " name =" Example_Name " /> 
 < label class =" Class " > Example </ label >
< input type =" email " name =" Example_Name " />

div พร้อมแอตทริบิวต์ id และคลาส: 

 echo Html:: div ( ' example text ' , [ ' id ' => ' Example_ID ' , ' class ' => ' Example_Class ' ]);

เอาท์พุท: 

 < div id =" Example_ID " class =" Example_Class " > example text </ div >

lebel พร้อมข้อความป้ายกำกับ, id, คลาสและแอตทริบิวต์ 

 echo Html:: label ( ' Some text ' , [ ' id ' => ' ID ' , ' class ' => ' Class ' , ' for ' => ' For ' ]);

เอาท์พุท: 

 < label id =" ID " class =" Class " for =" For " > Some text </ label >

การใช้ช่องทำเครื่องหมาย

ช่องทำเครื่องหมายง่าย ๆ พร้อมการทำเครื่องหมายเริ่มต้น 

 echo Html:: checkbox ( true , [ ' name ' => ' Name ' ]);
echo Html:: checkbox ( true , [ ' name ' => ' Name ' , ' value ' => ' Value ' ]);

เอาท์พุท: 

 < input type =" checkbox " name =" Name " value =" 1 " checked =" checked " />
< input type =" checkbox " name =" Name " value =" Value " checked =" checked " />

ส่งผ่านอาร์กิวเมนต์แรกเป็นเท็จสำหรับค่าเริ่มต้นที่ไม่ได้เลือก echo Html::checkbox(false)

รายการช่องทำเครื่องหมาย

สร้างรายการช่องทำเครื่องหมายด้วยค่าเริ่มต้น 

 echo Html:: checkbox ( ' cat ' , [ ' name ' => ' Name ' , ' id ' => ' ID ' ], [ ' dog ' => ' Dog ' , ' cat ' => ' Cat ' ]);
echo Html:: checkbox ([ ' cat ' ], [ ' name ' => ' Name ' , ' id ' => ' ID ' ], [ ' dog ' => ' Dog ' , ' cat ' => ' Cat ' ]);

เอาท์พุต 

 < label > < input type =" checkbox " value =" dog " name =" Name " id =" ID_1 " /> Dog </ label >
< label > < input type =" checkbox " value =" cat " name =" Name " id =" ID_2 " checked =" checked " /> Cat </ label >

วิธีรับอาร์เรย์ของค่าด้วยวิธี POST หรือ GET 

 echo Html:: checkbox ([ ' cat ' ], [ ' name ' => ' Name[] ' , ' id ' => ' ID ' ], [ ' dog ' => ' Dog ' , ' cat ' => ' Cat ' ]);

เอาท์พุต 

 < label > < input type =" checkbox " value =" dog " name =" Name[] " id =" ID_1 " /> Dog </ label >
< label > < input type =" checkbox " value =" cat " name =" Name[] " id =" ID_2 " checked =" checked " /> Cat </ label >

การใช้ปุ่มเลือก / วิทยุ

สร้างการเลือกด้วยค่าเริ่มต้น ชื่อ และแอตทริบิวต์ id 

 echo Html:: select ([ ' cat ' ], [ ' name ' => ' Name ' ], [ ' dog ' => ' Dog ' , ' cat ' => ' Cat ' ]);
echo Html:: select ([ ' cat ' ], [ ' name ' => ' Name ' ], [ ' dog ' , ' cat ' ]);

เอาท์พุต 

 < select name =" Name " >
    < option value =" dog " > Dog </ option >
    < option value =" cat " selected =" selected " > Cat </ option >
</ select >

< select name =" Name " >
    < option value =" dog " > dog </ option >
    < option value =" cat " selected =" selected " > cat </ option >
</ select >

สร้างรายการวิทยุ 

 echo Html:: radio ([ ' cat ' ], [ ' name ' => ' Name ' , ' id ' => ' ID ' ], [ ' dog ' , ' cat ' ]);

เอาท์พุต 

 < label > < input type =" radio " value =" dog " name =" Name " id =" ID_1 " /> dog </ label >
< label > < input type =" radio " value =" cat " name =" Name " id =" ID_2 " checked =" checked " /> cat </ label >

การใช้คอลเลกชัน

องค์ประกอบหลายอย่างสามารถจัดกลุ่มเข้าด้วยกันเป็นคอลเลกชันได้ 

 $ div = new Html ( ' div ' );
$ div -> p ( ' Hello World ' );
$ div -> text ( ' example ' );
$ div -> add ( ' Some plain text ' );
echo $ div -> render ();

เอาท์พุท: 

 < div >
    < p > Hello World </ p >
    < input type =" text " value =" example " />
    Some plain text
</ div >

คอลเลกชันใช้ตัวสร้าง Html และยอมรับพารามิเตอร์สองตัว

  • $type (ไม่บังคับ): ชื่อของแท็ก (เช่น แบบฟอร์ม div)
  • $attributes (เป็นทางเลือก): อาร์เรย์ของแอตทริบิวต์

ตัวอย่างแบบฟอร์ม

การสร้างแบบฟอร์มโดยใช้คอลเลกชัน: 

 $ form = new Html ( ' form ' , [ ' method ' => ' POST ' ]);
$ form -> div ( ' Enter your email and password for login ' );
$ form -> email ( '' , [ ' name ' => ' email ' , ' label ' => ' Email ' ]);
$ form -> password ( '' , [ ' name ' => ' password ' , ' label ' => ' Password ' ]);
$ form -> submit ( ' login ' );
echo $ form -> render ();

เอาท์พุท: 

 < form method =" POST " >
    < div > Enter your email and password for login </ div >
    < label > Email </ label >
    < input type =" email " name =" email " />
    < label > Password </ label >
    < input type =" password " name =" password " />
    < input type =" submit " value =" login " />
</ form >

คอลเลกชันที่ซ้อนกัน

การสร้างเทมเพลต html โดยใช้คอลเลกชันที่ซ้อนกัน: 

 $ html = new Html ( ' html ' );
$ head = $ html -> import ( ' head ' );
$ head -> title ( ' Example Title ' );
$ body = $ html -> import ( ' body ' );
$ body -> p ( ' Hello World ' );
echo $ html -> render ();
 < html >
    < head >
        < title > Example Title </ title >
    </ head >
    < body >
        < p > Hello World </ p >
    </ body >
</ html >

ใช้เป็นตัวสร้าง xml 

 $ book = new Html ( ' book ' );
$ book -> title ( ' The Da Vinci Code ' );
$ author = $ book -> import ( ' author ' );
$ author -> name ( ' Dan Brown ' );
$ author -> nationality ( ' American ' );
echo $ book -> render ();

เอาท์พุต 

< book >
    < title >The Da Vinci Code</ title >
    < author >
        < name >Dan Brown</ name >
        < nationality >American</ nationality >
    </ author >
</ book >

ขั้นสูง

คุณสามารถสร้างองค์ประกอบ html ใด ๆ ก็ได้โดยการเรียกชื่อองค์ประกอบเหล่านั้น 

 echo Html:: email ( ' [email protected] ' );
echo Html:: h1 ( ' Example Heading ' );

ภายใต้ประทุน เราใช้ Html::input() สำหรับองค์ประกอบอินพุต และ Html::tag() สำหรับแท็ก html

สร้างการป้อนข้อมูลอีเมลโดยใช้วิธี input : 

 echo Html:: input ( ' email ' , ' [email protected] ' );

สร้าง h1 โดยใช้วิธี tag : 

 echo Html:: tag ( ' h1 ' , ' Example Heading ' );

เพิ่ม html ให้กับองค์ประกอบก่อนและหลัง 

 echo Html:: email ( '' , [ ' _before ' => ' Before ' , ' _after ' => ' After ' ]);

เอาท์พุต 

Before < input type =" email " /> After

ปิดล้อมด้วยองค์ประกอบอื่น 

 echo Html:: email ( '' , [ ' _enclose ' => ' div ' ]);
echo Html:: email ( '' , [ ' _enclose ' => [ ' div ' , ' class ' => ' Class ' ]]);

เอาท์พุต 

 < div >
    < input type =" email " />
</ div >
< div class =" Class " >
    < input type =" email " />
</ div >

หลายวิธีในการตั้งค่าตัวเลือกสำหรับการเลือก / เลือกหลายรายการ / วิทยุ / ช่องทำเครื่องหมาย 

 // Same value and label
echo Html:: select ( null , [], [ ' audi ' , ' bmw ' ]);

// Different value and label
echo Html:: select ( null , [], [ ' audi ' => ' Audi ' , ' bmw ' => ' BMW ' ]);

// Option with extra attributes
echo Html:: select ( null , [], [ ' ferrari ' => [ ' Ferrari ' , ' data-origin ' => ' Italy ' ]]);
echo Html:: select ( null , [], [[ ' value ' => ' ferrari ' , ' label ' => ' Ferrari ' , ' data-origin ' => ' Italy ' ]]);

เอาท์พุต 

 < select > < option value =" audi " > audi </ option > < option value =" bmw " > bmw </ option > </ select >
< select > < option value =" audi " > Audi </ option > < option value =" bmw " > BMW </ option > </ select >
< select > < option value =" ferrari " data-origin =" Italy " > Ferrari </ option > </ select >
< select > < option value =" ferrari " data-origin =" Italy " > Ferrari </ option > </ select >

ผสมหลายวิธีด้วยอาร์เรย์ตัวเลือกเดียว 

 echo Html:: select ( null , [], [
    ' audi ' ,
    ' bmw ' => ' BMW ' ,
    ' honda ' => [
        ' Honda ' ,
        ' data-origin ' => ' Japan '
    ],
    [
        ' value ' => ' ferrari ' ,
        ' label ' => ' Ferrari ' ,
        ' data-origin ' => ' Italy '
    ]
]);

เอาท์พุต 

 < select >
    < option value =" audi " > audi </ option >
    < option value =" bmw " > BMW </ option >
    < option value =" honda " data-origin =" Japan " > Honda </ option >
    < option value =" ferrari " data-origin =" Italy " > Ferrari </ option >
</ select >

การใช้ค่าตัวเลข 

 echo Html:: select ( null , [], [ 2 => ' Two ' , 4 => ' Four ' ]);

เอาท์พุต 

 < select >
    < option value =" 2 " > Two </ option >
    < option value =" 4 " > Four </ option >
</ select >

ความปลอดภัย

หนีเอาท์พุต

การ Escape หมายถึงการแยกข้อมูลที่ไม่ต้องการออก เช่น HTML หรือแท็กสคริปต์ที่มีรูปแบบไม่ถูกต้อง

ไลบรารีใช้ esc_attr กับแอตทริบิวต์ค่า esc_url ไปยังแอตทริบิวต์ href และ src

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