วันจันทร์ที่ 3 ตุลาคม พ.ศ. 2559

การสร้างแบบฟอร์ม HTML

การสร้างแบบฟอร์ม

HTML

    เว็บไซต์นั้นต่างจากเอกสารธรรมดา ตรงที่สามารถตอบโต้กับผู้ใช้งานได้ เช่นการใช้ search (ค้นหา) ในเว็บไซต์ hellomyweb.com ช่องรับค่าของ search นั้นก็คือแบบฟอร์มใน html นั่นเอง

    เมื่อได้รับค่าจากแบบฟอร์ม search แล้วที่ฝั่ง server จะนำไปประมวลผลต่อโดยจะมีโปรแกรม (CGI Program) ที่ใช้สำหรับประมวลผล CGI Program จะเขียนโดยใช้ภาษา PHP , ASP , Python และอื่นๆอีกมากมาย CGI Program ที่เราเขียนไว้จะรับค่าจาก search แล้วนำไปประมวลผลหาบทความที่ใกล้เคียงกับค่าที่รับไป

    ในบทความนี้เราจะมาศึกษาในเรื่องฟอร์ม ของ HTML แต่จะไม่ลงลึกไปถึงการเขียน CGI Program ซึ่งหาท่านสนใจ CGI Program ก็ให้หาอ่านจากหัวข้อของ PHP ในเว็บไซต์ของเราได้

ลองสร้าง form ดู

     รูปแบบของ form

<form>

    ชนิดของค่าที่รับเช่น text , password

</form>


ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.แบบฟอร์มรับค่าตัวอักษร
    ในตัวอย่างเป็นการเขียน Text form ผู้ใช้งานสามารถกรอกข้อมูลที่เป็นตัวอักษรลงไปได้ จะสังเกตุว่า ใน input tag จะมี Attibute name อยู่ซึ่งเราจะใช้ในการอ้างอิงเมื่อเขียน CGI Program เราสามารถกำหนดขนาดของ text form ได้โดย ใช้ Attibute คำสั่ง size="ขนาดที่ต้องการ"

    2.แบบฟอร์มรับค่า password
    ในตัวอย่างเป็นการเขียน Password form เมื่อผู้ใช้กรอกข้อมูลลงไปในฟอร์มจะแสดงสัญลักษณ์ " ? " เพื่อไม่ให้คนอื่นเห็น password ที่เรากรอก

    3.ratio form
    ratio form เป็นฟอร์มที่ให้เลือกผลลัพธ์เพียงค่าเดียวเท่านั้น

    4.Checkboxes form
    Checkboxes เป็นฟอร์มที่ให้เลือกผลลัพธ์ได้หลายค่า

    5.สร้างปุ่มยืนยันรับค่า
    สังเกตุที่ search เป็นปุ่ม ปุ่มหนึ่งที่ใช้ในการยืนยันว่าเราพิมพ์ข้อมูลเสร็จแล้วหรือเลือกเสร็จแล้ว เราต้องการให้ส่งค่านี้ไปให้ CGI program ประมวลผล ปุ่มยืนยันจะใช้ในทุกฟอร์มของ html ซึ่งการส่งค่าไปประมวลผลจะมีด้วยการ 2 method คือ get , post ซึ่งเราจะพูดกันในหัวข้อของ PHP

    6.drop down box
    drop down เมนูในการเลือกข้อมูลแบบหนึ่ง ที่ให้คุณเลือกข้อมูลได้ข้อมูลเดียว เหมาะกับการใช้กับข้อมูลที่มากๆ เช่น กรอกข้อมูลที่อยู่ โดยใช้ dropdown ให้เลือกจังหวัด

    7.text area
    text area เหมาะสำหรับแบบฟอร์มที่ต้องกรอกข้อมูลจำนวนมากๆเช่น ที่อยู่

    8. Fieldset
    fieldset จะสร้างขอบให้ข้อมูลของคุณและมีหัวข้อให้ทำให้อ่าข้อมูลได้ง่ายขึ้น

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

Set MongoDB in the windows path environment

  Let’s set MongoDB in the windows environment in just a few steps. Step 1: First download a suitable MongoDB version according to your mach...