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.

Html_Day_Four(W3Schools)

364 views

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

Html_Day_Four(W3Schools)

  1. 1. www.afghanhost.af - info@afghanhost.af 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 w3schools.com 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>

×