1 / 25

HTML Forms

HTML Forms. a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing. <form action=”/cgi-bin/register_user” method=”post”> ... </form>. action – cgi script to be executed on the server side

sunee
Download Presentation

HTML Forms

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. HTML Forms • a form is a container for input elements on a web page • input elements contain data that is sent to the web server for processing

  2. <form action=”/cgi-bin/register_user” method=”post”> ... </form> • action – cgi script to be executed on the server side • method – POST or GET specifies how the input values are delivered to the cgi script

  3. Input controls • <input> - text, radio buttons, checkboxes, files, hidden, passwords • <button> - buttons • <textarea> - multiline text • <select> - drop down list

  4. <input type=”text”> • attributes: • name – control name • value – intial value • size – initial display width (in characters) • maxlength – maximum number of characters a user may enter

  5. User Id: <input type=”text” name=”userid” size=”10” maxlength=”8”>

  6. <input type=”password”> • attributes: • same as for “text” • characters typed are rendered as *s • secure only in the user agent • actual value sent in the clear over HTTP

  7. Password: <input type=”password” name=”passwd” size=”10” maxlength=”8”>

  8. <input type=”hidden”> • like text except the field isn't rendered in the browser and the user can't interact with it • attributes: • name – control name • value – initial (and only value)

  9. <input type="hidden" name="secret" value="ssshhh!">

  10. <textarea> • creates a multi-line input text area • attributes: • rows – the number of lines of input text • cols – the width of the text area (in average character widths) • name – the name of the control

  11. Mail message: <br> <textarea rows="5" cols="40" name="mmesg"> This is the default value. </textarea>

  12. <input type=”radio”> • creates a radio button • a mutually exclusive group is created by creating several elements with the same name attribute • attributes: • name – control name • value – value associated with selected radio button • checked – initial state of the button

  13. Eye color: <br> <input type="radio" name="eye_c" value="brown"> Brown <br> <input type="radio" name="eye_c" value="blue" checked="checked"> Blue <br> <input type="radio" name="eye_c" value="green"> Green <br>

  14. <input type=”checkbox”> • creates a checkbox • a non-exclusive group is created by creating several elements with the same name attribute • attributes: • name – control name • value – value associated with selected checkbox • checked – initial state of the checkbox

  15. Favourite Foods: <br> <input type="checkbox" name="ffood" value="tofu"> Tofu <br> <input type="checkbox" name="ffood" value="lentils"> Lentils <br> <input type="checkbox" name="ffood" value="steak"> Steak <br>

  16. Lists • <select> element contianing one or more <option> elements • <select> attributes • name – control name • size – number of list items visible • multiple – indicates multiple items can be selected from the list

  17. <option> element • defines one option in a list • attributes: • selected – indicates that the option is pre-selected • value – initial value of the control (otherwise defaults to the content of the element) • label – alternate string to display rather than the content of the element

  18. Menu items: <select name="menu" size="1"> <option value="a">foo</option> <option value="b">bar</option> <option value="c">foobax</option> <option value="d">blim</option> </select>

  19. <input type=”file”> • allows an entire file to be submitted with a form • attributes • name – control name • value – intial file to use

  20. Image file: <input type="file" name="img_file" value="C:\boot.ini" size="10">

  21. Buttons • submit – causes the form to be submitted to the web server • reset – causes all input controls within the <form> to be restored to their initial buttons • other – behaviour defined by page author through client side scripting

  22. <input > style buttons • attributes: • name: control name • type: submit, reset, image, button • image creates a graphical submit button • button creates a generic button • value: text to display on button control

  23. <input type="submit" value="Go!"> <input type="reset" value="Ooops!"><br> <input type="button" value="Do Something!"><br> <input type="image" name="info" src="info.gif"><br>

  24. HTML5 features • placeholder attribute • date, time, email, url, color, etc. input types

More Related