Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.

Published in: Technology
  • Be the first to comment


  1. 1. - Instructor: Mohammad Rafi Haidari27-May-2014 HTML (Day 4)  Forms and Input  Iframes
  2. 2. HTML Forms and Input HTML forms are used to pass data to a server. An HTML form can contain input elements like o Text Fields o Checkboxes o Radio-buttons o Submit buttons and more. A form can also contain o Select lists, o Textarea o Fieldset o Legend, The <form> tag is used to create an HTML form: <form> . input elements . </form>
  3. 3. HTML Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below. 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> Last name: <input type="text" name="lastname"> </form>
  4. 4. HTML Input Element Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> 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>
  5. 5. HTML Input Element Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO 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> 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: <form name=“input” action=“test.php” method=“post”> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
  6. 6. HTML <textarea> Tag Definition and Usage 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 can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. <textarea rows="4" cols="50"> At you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>
  7. 7. HTML <fieldset> Tag The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements. The <fieldset> tag is supported in all major browsers. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
  8. 8. HTML <select> Tag The <select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. The <select> tag is supported in all major browsers <select> <optgroup label=“Provinces"> <option value=“Herat”> Herat </option> <option value=“Kabul”> Kabul </option> <option value=“Mazar”> Mazar </option> <option value=“Kandahar”> Kandahar </option> </optgroup> </select> multiple options can be selected at once <multiple>
  9. 9. HTML Iframes Syntax for adding an iframe: <iframe src="URL"></iframe> Iframe - Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default. <iframe src="demo_iframe.htm" width="200" height="200"></iframe> Iframe - Remove the Border The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border: <iframe src="demo_iframe.htm" frameborder="0"></iframe>