Table Tag * <table> defines a table * <th> Defines a table header * <tr> Defines a row in a table * <td> Defines table data Attributes of Table Tag * border (It specifies the width of the border around a table) * cellpadding (Specifies the space between the cell wall and the cell content) * cellspacing (Specifies the space between cells) * align (values can be left, center or right) * width (specifies the width of a table) * bgcolor (specifies a background color of a table) Color name (“pink”) Hex code of color name (“#ffA000”) rgb number ( “rgb(255,0,0)”) Attributes of <th> and <td> Tag * align =left, right, center, justify * bgcolor =color name, rgb(), hex code * colspan =number * rowspan =number * height =pixel or percentage * valign =top, middle, bottom * width =pixel or percentage Example <html> <head> <title> Table Example </title> </head> <body> <table border=”5px” cellspacing=”0px”> <tr bgcolor=”khaki”> <th> S. No. </th> <th> Name </th> <th> Age </th> </tr> <tr> <td> 1 </td> <td> Rahul </td> <td> 19 </td> </tr> <tr> <td> 2 </td> <td> Anmol </td> <td> 18 </td> </tr> <tr> <td> 3 </td> <td> Swati </td> <td> 17 </td> </tr> </table> </body> </html> Block and Inline Element * In visual browsers, displayable elements can be rendered as either block or inline. * Block elements have automatic break line feature. * Inline elements do not have automatic line change feature. Example Block Elements: Paragraph, heading, list etc Inline elements: image, anchor etc Div and Span Tag * <div> defines a section in a document * <span> defines a section in a document * The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code. Form Tag * 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 most important form element is the input element. * To create an HTML form we use the <form> tag. Syntax : <form> input controls </form> Attributes of form tag * Action The required action attribute specifies where to send the form-data when a form is submitted. * Method Specifies how to send form-data The form-data can be sent as URL variables (with method="get") or as HTTP post (with method="post"). Example <html> <head> <title> Form example </title> </head> <body> <form action=“sum.php” method=“get”> </form> </body> </html> Tags within form tag * <input> * <button> * <option> * <select> * <textarea> Input tag * The input element is used to select user information * An input element can vary in many ways, depending on the type attribute <input type=“text” /> <input type=“radio” /> <input type=“password” /> <input type=“submit” /> <input type=“checkbox” /> <input type=”file” /> <input type=“date” /> <input type=“month” /> <input type=”time” /> <input type=“hidden” /> <input type=”search” /> <input type=”color” /> <input type=“image” /> <input type=”number” /> Textarea tag * The <textarea> tag defines a multi-line text input control. * A text area can hold an unlimited number of characters. * The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS height and width properties Select and option tags * The <select> tag is used to create a select list (drop-down list). * The <option> tags inside the select element define the available options in the list. Button tag * The <button> tag defines a push button Example (For better alignment elements related to form resides inside the table tag) <html> <head> <title> Form example </title> </head> <body> <form action=“registration.php” method=“post”> <form action="registration.php" method="post"> <table> <tr> <td>Name</td> <td><input onkeyup="fun1()" type="text" name="user"/></td> <td id="msg1"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>Gender</td> <td><input type="radio" name="gender"/>M <input type="radio" name="gender"/>F</td> </tr> <tr> <td>Course</td> <td><input type="checkbox" name="C"/>C <input type="checkbox" name="CPP"/>C++</td> </tr> <tr> <td></td> <td><input type="submit" onclick="return validate()" value="Register"/> <input type="reset" /> </td> </tr> </table> </form> </body> </html> In the above HTML code, as soon as user presses the submit button, form data will be send to the server. Data will be send to a server so that it can get processed there. The php script that will use the data is mentioned in action attribute of form tag <<Prev Home Next>>
Saturday, July 1, 2017
More HTML Tags
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment