HTML form tag : สอน tag ของ form tag, เรียน tag ของ form tag
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • form ใช้สร้างแบบฟอร์ม
    form method ใช้กำหนดวิธีการส่งข้อมูล
    form action ใช้กำหนดไฟล์ที่จะรับข้อมูลไปประมวลผล
    input type ใช้ในการกำหนด ช่องรับข้อมูลประเภทต่างๆ
    input name ใช้กำหนดชื่อให้กับ ช่องรับข้อมูล
    input value ใช้กำหนดค่าข้อมูล ให้กับช่องรับข้อมูล
    input maxlength ใช้กำหนดจำนวนสูงสุด ที่สามารถพิมพ์ลงไปได้
    input size ใช้กำหนด ขนาด ของช่องรับข้อมูล
    input src ใช้กำหนดรูปภาพ ที่ทำงานเหมือนปุ่ม submit
    input checked ใช้กำหนดว่าให้ checkbox หรือ radio นั้น ถูกเลือกอยู่
    textarea ใช้ในการกำหนด อุปกรณ์การรับข้อมูล แบบรับข้อความได้หลายบรรทัด
    textarea cols ใช้กำหนด จำนวนตัวอักษร ภายในแต่ละแถว
    textarea rows ใช้กำหนดจำนวนแถว
    textarea wrap ใช้กำหนดว่าจะมีการตัดคำขึ้นบรรทัดใหม่หรือไม่
    select ใช้สร้างช่องรับข้อมูลแบบ dropdown
    select name ใช้กำหนดชื่อช่องรับข้อมูล
    select size ใช้กำหนดขนาดของ list ซึ่งเมื่อกำหนดมากกว่า 1 จะทำให้ list นี้ กลายเป้น list box
    select multiple ใช้กำหนดให้สามารถเลือก รายการ ได้ครั้งละมากกว่า 1 รายการ
    optgroup ใช้จัดกลุ่มให้กับรายการใน list
    optgroup label ใช้กำหนด ชื่อกลุ่ม ของรายการในกลุ่ม ( ไม่สามารถเลือกได้ )
    option ใช้กำหนดรายการ
    option value ใช้กำหนด ค่าข้อมูล ของรายการ โดยค่าข้อมูลนี้จะถูกส่งไป เมื่อมีการ submit form
    option selected ใช้กำหนดว่า รายการนั้น ถูกเลือกอยู่
    fieldset ใช้ในการจัดรูปแบบภายใน form
    legend ใช้กำหนดป้ายชื่อของ fieldset
    label ใช้กำหนด ป้ายชื่อ ให้กับ ช่องรับข้อมูล
    label for ใช้กำหนดป้ายชื่อให้กับ ช่องรับข้อมูล
  • tag :
    <form> ... </form>

    position :
    <body> ... </body>

    content :
    ใช้สร้างแบบฟอร์ม

    example :
    <form method="post" action="update.php">
         <input type="text" name="panda" />
         <input type="submit" name="submit" />
    </form>

  • tag :
    <form method="value"> ... </form>

    value :
    get, post

    content :
    ใช้กำหนดวิธีการส่งข้อมูล

    example :
    <form method="post">
         ...
    </form>

  • tag :
    <form action="value"> ... </form>

    value :
    ชื่อไฟล์ ( ประเภท CGI )

    content :
    ใช้กำหนดไฟล์ที่จะรับข้อมูลไปประมวลผล

    example :
    <form action="update.php">
         ...
    </form>

  • tag :
    <input type="value" />

    value :
    text, password, hidden, submit, image, reset, button, file, checkbox, radio

    position :
    <form> ... </form>

    content :
    ใช้ในการกำหนด ช่องรับข้อมูลประเภทต่างๆ

    example :
    <input type="text" name="panda" />
    <input type="submit" name="submit" />
    

  • tag :
    <input name="value" />

    value :
    ข้อความ

    position :
    <form> ... </form>

    content :
    ใช้กำหนดชื่อให้กับ ช่องรับข้อมูล

    example :
    <input type="text" name="sex" />
    <input type="text" name="name" />
    <input type="text" name="lastname" />

    comment :
    สามารถใช้ได้กับ ช่องรับข้อมูล ทุกประเภท

  • tag :
    <input value="value" />

    value :
    ข้อความ

    position :
    <form> ... </form>

    content :
    ใช้กำหนดค่าข้อมูล ให้กับช่องรับข้อมูล

    example :
    <input type="text" name="sex" value="man" />
    <input type="text" name="name" value="bamboo" />
    <input type="text" name="lastname" value="labcode" />

    comment :
    สามารถใช้ได้กับ ช่องรับข้อมูล ทุกประเภท

  • tag :
    <input maxlength="value" />

    value :
    ตัวเลข

    position :
    <form> ... </form>

    content :
    ใช้กำหนดจำนวนสูงสุด ที่สามารถพิมพ์ลงไปได้

    example :
    <input type="text" name="sex" maxlength="5" />
    <input type="text" name="name" maxlength="25" />
    <input type="text" name="lastname" maxlength="25" />

    comment :
    สามารถใช้ได้กับ ช่องรับข้อมูล ประเภท text, password

  • tag :
    <input size="value" />

    value :
    ตัวเลข

    position :
    <form> ... </form>

    content :
    ใช้กำหนด ขนาด ของช่องรับข้อมูล

    example :
    <input type="text" name="sex" size="8" />
    <input type="text" name="name" size="12" />
    <input type="text" name="lastname" size="12" />

    comment :
    สามารถใช้ได้กับ ช่องรับข้อมูล ประเภท text, password, file

  • tag :
    <input src="value" />

    value :
    ชื่อไฟล์ภาพ

    position :
    <form> ... </form>

    content :
    ใช้กำหนดรูปภาพ ที่ทำงานเหมือนปุ่ม submit

    example :
    <input type="image" src="panda.gif" />

    comment :
    สามารถใช้ได้กับ ช่องรับข้อมูล ประเภท image

  • tag :
    <input checked="value" />

    value :
    checked

    position :
    <form> ... </form>

    content :
    ใช้กำหนดว่าให้ checkbox หรือ radio นั้น ถูกเลือกอยู่

    example :
    <input type="checkbox" checked="checked" />
    <input type="radio" checked="checked" />

    comment :
    สามารถใช้ได้กับ ช่องรับข้อมูล ประเภท checkbox, radio

  • tag :
    <textarea> ... </textarea>

    position :
    <form> ... </form>

    content :
    ใช้ในการกำหนด อุปกรณ์การรับข้อมูล แบบรับข้อความได้หลายบรรทัด

    example :
    <textarea cols="30" rows="5"> ข้อความ </textarea>

  • tag :
    <textarea cols="value"> ... </textarea>

    value :
    ตัวเลข

    content :
    ใช้กำหนด จำนวนตัวอักษร ภายในแต่ละแถว

    example :
    <textarea cols="30"></textarea>

  • tag :
    <textarea rows="value"> ... </textarea>

    value :
    ตัวเลข

    content :
    ใช้กำหนดจำนวนแถว

    example :
    <textarea rows="5"></textarea>

  • tag :
    <textarea wrap="value"> ... </textarea>

    value :
    off ใช้กำหนดว่าจะไม่มีการตัดคำขึ้นบรรทัดใหม่,
    physical หรือ hard ใช้กำหนดว่ามีการตัดคำขึ้นบรรทัดใหม่ ( มีอักขระ /n ),
    virtual หรือ soft ใช้กำหนดว่ามีการตัดคำขึ้นบรรทัดใหม่ ( ไม่มีอักขระ /n )

    content :
    ใช้กำหนดว่าจะมีการตัดคำขึ้นบรรทัดใหม่หรือไม่

    example :
    <textarea wrap="soft"></textarea>

  • tag :
    <select> ... </select>

    position :
    <form> ... </form>

    content :
    ใช้สร้างช่องรับข้อมูลแบบ dropdown

    example :
    <select name="country">
         <option value="1"> Thailand </option>
         <option value="2"> England </option>
    </select>

  • tag :
    <select name="value"> ... </select>

    value :
    ข้อความ

    content :
    ใช้กำหนดชื่อช่องรับข้อมูล

    example :
    <select name="country">
         ...
    </select>

  • tag :
    <select size="value"> ... </select>

    value :
    ตัวเลข

    content :
    ใช้กำหนดขนาดของ list ซึ่งเมื่อกำหนดมากกว่า 1 จะทำให้ list นี้
    กลายเป้น list box ( ปกติเป็นแบบ dropdown list )

    example :
    <select size="5">
         ...
    </select>

  • tag :
    <select multiple="value"> ... </select>

    value :
    multiple

    content :
    ใช้กำหนดให้สามารถเลือก รายการ ได้ครั้งละมากกว่า 1 รายการ 
    โดยจะใช้ได้ในกรณีที่ select เป็นแบบ list box เท่านั้น

    example :
    <select size="10" multiple="multiple">
         .....
    </select>

  • tag :
    <optgroup> ... </optgroup>

    position :
    <select> ... </select>

    content :
    ใช้จัดกลุ่มให้กับรายการใน list

    example :
    <optgroup label="thailand">
         <option value="t01"> chonburi fc </option>
         <option value="t02"> bankok fc </option>
    </optgroup>

  • tag :
    <optgroup label="value"> ... </optgroup>

    value :
    ข้อความ

    content :
    ใช้กำหนด ชื่อกลุ่ม ของรายการในกลุ่ม ( ไม่สามารถเลือกได้ )

    example :
    <optgroup label="thailand">
         ...
    </optgroup>

  • tag :
    <option> ... </option>

    position :
    <select> ... </select>

    content :
    ใช้กำหนดรายการ

    example :
    <option value="1"> Thailand </option>
    <option value="2"> England </option>

  • tag :
    <option value="value"> ... </value>

    value :
    ข้อความ

    content :
    ใช้กำหนด ค่าข้อมูล ของรายการ โดยค่าข้อมูลนี้จะถูกส่งไป เมื่อมีการ submit form

    example :
    <option value="1"> Thailand </option>
    <option value="2"> England </option>

  • tag :
    <option selected="value"> ... </option>

    value :
    selected

    content :
    ใช้กำหนดว่า รายการนั้น ถูกเลือกอยู่

    example :
    <option> Thailand </option>
    <option  selected="selected"> England </option>
    <option> Australia </option>

  • tag :
    <fieldset> ... </fieldset>

    position :
    <form> ... </form>

    content :
    ใช้ในการจัดรูปแบบภายใน form

    example :
    <fieldset>
         <legend> ข้อมูลส่วนตัว </legend>
         <label> ชื่อ : <input type="text" /> </label>
         <label> นามสกุล : <input type="text" /> </label>
    </fieldset>

  • tag :
    <legend> ... </legend>

    position :
    <fieldset> ... </fieldset>

    content :
    ใช้กำหนดป้ายชื่อของ fieldset

    example :
    <fieldset>
         <legend> ข้อมูลส่วนตัว </legend>
         ...
    </fieldset>

  • tag :
    <label> ... </label>

    position :
    <form> ... </form>

    content :
    ใช้กำหนด ป้ายชื่อ ให้กับ ช่องรับข้อมูล
    คือถ้าคลิกที่ป้ายชื่อแล้วก็จะไป focus ที่ช่องรับข้อมูลนั้นๆ

    example :
    <label> ชื่อ : <input type="text" /> </label>
    <label> นามสกุล : <input type="text" /> </label>

  • tag :
    <label for="value" />

    value :
    ชื่อของช่องรับข้อมูล

    content :
    ใช้กำหนดป้ายชื่อให้กับ ช่องรับข้อมูล
    คือถ้าคลิกที่ป้ายชื่อแล้วก็จะไป focus ที่ช่องรับข้อมูลนั้นๆ

    example :
    <label for="firstname" /> ชื่อ : <input type="text" name="firstname" />
    <label for="surname" /> นามสกุล : <input type="text" name="surname" />

 
Share This Chapter Login with Facebook