รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้งาน HTML5 Form Elements datalist, keygen, output

      วันนี้เราจะมาทำความรู้จักกับการใช้งาน HTML5 Form Elements ตัวใหม่ๆ ที่น่าสนใจกันน่ะครับทั้ง datalist, keygen และ output

     

    การใช้งานแท็ก <datalist>

    <datalist> tag เป็น ถูกกำหนดให้ ใช้คู่กับ form เพื่อทำการ generator การเข้ารหัสให้กับ ข้อมูลใน form ใช้เพื่อระบบความปลอดภัยในกาส่งข้อมูลจาก Client ไปยัง Server เมื่อ form ถูก submit private key จะถูกจัดเก็บไว้ยัง เครื่องคอมพิวเตอร locally หรือเครื่อง Client และ public key จะถูกส่งไปยัง server 


    ตัวอย่างโค๊ด

    <form action="demo_form.asp" method="get">

    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <input type="submit">
    </form>
     

    การใช้งานแท็ก <keygen>

    <keygen> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น List option ของข้อมูล element นี้ จะใช้ร่วมกับ input element เพื่อให้เราเลือก input value ให้กับ element ตาม list ที่มี

     

    Attributes Value รายละเอียด
    autofocus disabled ทำให้ input field เกิด focused เมื่อ page load
    challenge challenge กำหนดว่า กำหนดค่า value ของ keygen เมื่อกด submit
    disabled disabled ทำการ Disables keytag field
    form formname กำหนดชื่อ Form ตั้งแต่ 1 form เพื่อเข้ารหัส
    keytype rsa / other กำหนด security algorithm ของ key เพื่อเข้ารหัส เช่น rsa เพื่อ generates การเข้ารหัส RSA key
    name fieldname กำหนด unique name สำหรับ input element

     

    ตัวอย่างโค๊ด

    <!DOCTYPE html>
    <html>
    <body>
    <form action="demo_keygen.asp" method="get">

      Username: <input type="text" name="usr_name">

      Encryption: <keygen name="security">

      <input type="submit">

    </form>
    </body>
    </html>

     

    การใช้งานแท็ก <output>

    <output> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น output ของการแสดงข้อมูลของการคำนวน

     

    Attributes Value รายละเอียด
    for id กำหนด id ของ element ตั้งแต่ 1 elements ขึ้นไป ที่จะใช้ร่วมกับ output
    form formid กำหนด id ของ form ตั้งแต่ 1 form ขึ้นไป ที่จะใช้ร่วมกับ output
    name name กำหนด unique name สำหรับ input element

     

    ตัวอย่างโค๊ด

    <!DOCTYPE html>
    <html>
    <body>

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

    <input type="range" id="a" value="50">100

    +<input type="number" id="b" value="50">

    =<output name="x" for="a b"></output>

    </form>

    </body>
    </html>

     

     

     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com