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

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

การปรับแต่งฟอร์มด้วย HTML5 New Input Types

    New Input Types คือตัวลือกใหม่ที่ถูกเพิ่มใน HTML5 เพื่อให้เว็บไซต์ที่สร้างด้วย HTML5 สามารถปรับแต่งฟอร์มได้หลากหลายมากขึ้น โดยแท็กที่ใช้คือแท็ก <input>  ซึ่งหลายๆ Attribute นั้น มีประโยชน์และประหยัดเวลาในการทำเว็บไซด์อย่างมากเลยทีเดียว ตัวอย่างเช่น


    New Input Types Attributes

    tel    กำหนด input value ให้เป็นที่ใส่ ข้อมูล หมายเลข โทรศัพท์
    search    กำหนด input เป็น Search field
    url    กำหนด input value ให้เป็นที่ใส่ ข้อมูล URL Address
    email    กำหนด input value ให้เป็นที่ใส่ ข้อมูล Email Address ตั้งแต่ 1 Address ขึ้นไป
    datetime    กำหนด input value ให้เป็นที่ใส่ ข้อมูล วันเวลา
    date    กำหนด input value ให้เป็นที่ใส่ ข้อมูลวันที่
    month    กำหนด input value ให้เป็นที่ใส่ ข้อมูล เดือน
    week    กำหนด input value ให้เป็นที่ใส่ ข้อมูล สัปดาห์
    time    กำหนด input value ให้เป็นที่ใส่ ข้อมูลเวลา
    datetime-local    กำหนด input value ให้เป็นที่ใส่ ข้อมูล local date/time
    number    กำหนด input value ให้เป็นที่ใส่ ข้อมูล ชนิดตัวเลข
    range    กำหนด input value ให้เป็นที่ใส่ ข้อมุล ที่สามารถกำหนดช่วงของข้อมูลได้
    color    กำหนด input value ให้เป็นที่ใส่ ข้อมูล ของค่าสี เช่น #FF00F0 เป็นต้น 


    Range Attributes

    max    number    กำหนด input value สูงสุด
    min    number    กำหนด input value ต่ำสุด
    step    number    กำหนด input value เป็น Step เช่น step="5" ค่าที่เป็นไปได้จะเป็น -10, -5, 0, 5, 10 เป็นต้น
    value    number    กำหนด input value ค่า default value

     

    ตัวอย่าง


    Input Type: color
    ใส่ค่าสี โดยค่าที่ใส่ อาจใช้เป็นรหัสสี หรือ ชื่อสีก็ได้ บราวเซอร์ที่สนับสนุน google chome ,opera

    <html>
    <body>
    <form action="demo_form.asp">
      Select your favorite color: <input type="color" name="favcolor"><br>
      <input type="submit">
    </form>
    </body>
    </html>


    Input Type: date
    ใส่วันที่ โดยค่าที่ใส่จะเป็นตัวเลข เช่น ปี เดือน วัน (2012-03-07)  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

    <html>
    <body>
    <form action="demo_form.asp">
      Birthday: <input type="date" name="bday">
      <input type="submit">
    </form>
    </body>
    </html>


    Input Type: datetime
    ใส่วันที่และเวลา โดยค่าที่ใส่จะเป็น เช่น ปี เดือน วัน : เวลา(2012-06-22 T12:00) บราวเซอร์ที่สนับสนุน opera,safari

    <html>
    <body>
    <form action="demo_form.asp">
      Birthday (date and time): <input type="datetime" name="bdaytime">
      <input type="submit">
    </form>
    </body>
    </html>


    Input Type: email
    ใส่อีเมล บราวเซอร์ที่สนับสนุน google chome ,opera,firefox


    <html>
    <body>
    <form action="demo_form.asp">
      E-mail: <input type="email" name="usremail"><br>
      <input type="submit">
    </form>
    </body>
    </html>



    Input Type: month
    ใส่เดือนและปี  บราวเซอร์ที่สนับสนุน google chome ,opera,safari


    <html>
    <body>
    <form action="demo_form.asp">
      Birthday (month and year): <input type="month" name="bdaymonth">
      <input type="submit">
    </form>
    </body>
    </html>

     

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

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

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