1 / 21

ITE-301 Web Design and Development

ITE-301 Web Design and Development. Mr.Nitirat Tanthavech. HTML Forms. HTML forms are used to pass data to a server .

ulani
Download Presentation

ITE-301 Web Design and Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ITE-301Web Design and Development Mr.NitiratTanthavech

  2. HTML Forms • HTML forms are used to pass data to a server. • A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. • The <form> tag is used to create an HTML form: <form> ….. input elements ….. </form>

  3. HTML Forms : Attributes • Main Attribute :

  4. HTML Forms : Attributes • Optional Attribute :

  5. Text Fields • <input type="text" /> defines a one-line input field that a user can enter text into : <form> First name: <input type="text" name="firstname" /><br/><br/> Last name: <input type="text" name="lastname" /> </form> Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

  6. Text Fields • เป็นอุปกรณ์ที่รับข้อมูลแบบอิสระ โดยสามารถรับข้อมูลทั้งตัวอักษรและตัวเลขได้ • เช่น ชื่อ นามสกุล ที่อยู่ เป็นต้น • ไม่ควรมีเยอะมากจนเกินไป เพราะ ผู้ใช้จะไม่อยากกรอกข้อมูล • มีอยู่ 3 ประเภท คือ Single-line, Multi-line, Password

  7. Text Fields • Single-Lineคือ ใช้กรอกข้อมูลได้เพียง 1 บรรทัด • <input name="fname" type="text" id="fname" size="30" /> • Multi-lineคือ ใช้กรอกข้อมูลได้มากกว่า 1 บรรทัด • <textareaname="fname" rows="3" id="fname"></textarea>

  8. Text Fields • Passwordคือ ใช้กรอกข้อมูลได้เพียง 1 บรรทัด และซ่อนความหมาย • <input name="password" type="password" id="fname" /> • คุณสมบัติหลัก มี 4 ตัว คือ • readonly, readonly=“readonly” • disable , disable=“disable” • size • maxchar • value

  9. Radio Buttons • <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form>

  10. Checkboxes • <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

  11. Submit Button • <input type="submit" /> defines a submit button. • A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

  12. Submit Button <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> • If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

  13. HTML <input> Tag • The <input> tag is used to select user information. • <input> elements are used within a <form> element to declare input controls that allow users to input data. • An input field can vary in many ways, depending on the type attribute. • Differences Between HTML and XHTML • In HTML, the <input> tag has no end tag. • In XHTML, the <input> tag must be properly closed, like this <input />.

  14. HTML <input> Tag

  15. HTML <input> Tag

  16. HTML <textarea> Tag • The <textarea> tag defines a multi-line text input control. • A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). • The size of a text area is specified by the cols and rows attributes.

  17. HTML <textarea> Tag • Optional Attributes :

  18. HTML <label> Tag • The <label> tag defines a label for an <input> element. <label for="fname" id="topic_fname“>ชื่อ</label> <input name="fname" type="text" id="fname" size="30" />

  19. HTML <select> Tag • The <select> tag is used to create a drop-down list. • The <option> tags inside the <select> element define the available options in the list. • เป็นอุปกรณ์ที่นำเสนอตัวเลือกข้อมูลให้กับผู้ใช้ โดยที่ไม่ต้องพิมพ์ข้อความใด ๆ แค่เลือกเท่านั้น • ข้อดี ช่วยประหยัดพื้นที่การแสดงผล

  20. HTML <option> Tag • The <option> tag defines an option in a select list. • <option> elements go inside a <select> element.

  21. HTML <select> Tag <select name="carbrand" id="carbrand"> <option value="Volvo“ selected=“selected”> Volvo</option> <option value="Saab">Saab</option> <option value="Mercedes“ disabled="disabled“> Mercedes</option> <option value="Audi">Audi</option> </select>

More Related