HTML Help: Difference between revisions
(8 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
See http://www.w3schools.com/tags/tag_form.asp | See http://www.w3schools.com/tags/tag_form.asp | ||
* <span> tag is used to group inline-elements in a document; it provides no visual change by itself; it provides a way to add a hook to a part of a text or a part of a document; when the text is hooked in a <span> element you can add styles to the content, or manipulate the content with for example JavaScript | |||
* <b> renders as bold text | * <b> renders as bold text | ||
* <br> tag inserts a single line break (Note: use it to insert line breaks, not to create paragraphs); in XHTML must be closed | * <br> tag inserts a single line break (Note: use it to insert line breaks, not to create paragraphs); in XHTML must be closed like this: <br /> | ||
* <tr> tag defines a row in an HTML table; <tr> element contains one or more <th> or <td> elements | * <tr> tag defines a row in an HTML table; <tr> element contains one or more <th> or <td> elements | ||
Line 22: | Line 24: | ||
* <table> tag defines an HTML table; an HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements; the <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. | * <table> tag defines an HTML table; an HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements; the <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. | ||
<table width=100%> - defines width (in pixels); deprecated, but without it table will not use entire browser area, and 'align' does not work in following <td> tags | |||
<table cellpadding='"N" cellspacing='"M"> - N is the space between the cell wall and the cell content, M is the space between cells (in pixels) | <table cellpadding='"N" cellspacing='"M"> - N is the space between the cell wall and the cell content, M is the space between cells (in pixels) | ||
Line 36: | Line 40: | ||
* <input type="hidden" name="returnTo" value="{$smarty.request.returnTo}"> - ''type'' can be button, checkbox, file, hidden, image, password, radio, reset, submit, text; ''name'' attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted; ''value'' attribute specifies the value of an <input> element and used differently for different input types: for "button", "reset", and "submit" - it defines the text on the button, for "text", "password", and "hidden" - it defines the initial (default) value of the input field, for "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) (Note1: The value attribute is required with <input type="checkbox"> and <input type="radio">)(Note2: The value attribute cannot be used with <input type="file">). | * <input type="hidden" name="returnTo" value="{$smarty.request.returnTo}"> - ''type'' can be button, checkbox, file, hidden, image, password, radio, reset, submit, text; ''name'' attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted; ''value'' attribute specifies the value of an <input> element and used differently for different input types: for "button", "reset", and "submit" - it defines the text on the button, for "text", "password", and "hidden" - it defines the initial (default) value of the input field, for "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) (Note1: The value attribute is required with <input type="checkbox"> and <input type="radio">)(Note2: The value attribute cannot be used with <input type="file">). | ||
* <select> - tag is used to create a drop-down list.; the <option> tags inside the <select> element define the available options in the list. | |||
<select size="number"> - specifies the number of visible options in a drop-down list; if the value of the size attribute is greater than "1", but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view | |||
== Smarty == | == Smarty == | ||
* {if isset($smarty.request.id)}Edit Cable{else}Insert new cable{/if} - if statement example; another example: | |||
{if $name eq 'Fred'} | |||
Welcome Sir. | |||
{elseif $name eq 'Wilma'} | |||
Welcome Ma'am. | |||
{else} | |||
Welcome, whatever you are. | |||
{/if} |
Latest revision as of 13:08, 19 August 2012
HTML
See http://www.w3schools.com/tags/tag_form.asp
- <span> tag is used to group inline-elements in a document; it provides no visual change by itself; it provides a way to add a hook to a part of a text or a part of a document; when the text is hooked in a element you can add styles to the content, or manipulate the content with for example JavaScript
- <b> renders as bold text
- <br> tag inserts a single line break (Note: use it to insert line breaks, not to create paragraphs); in XHTML must be closed like this: <br />
- tag defines a row in an HTML table; element contains one or more or elements
- tag defines a header cell in an HTML table, contains header information, text are bold and centered by default.
- tag defines a standard cell in an HTML table, contains data, text are regular and left-aligned by default.
- standard attribute, the classname is mostly used to point to a class in a style sheet; however, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class. - N is the number of columns a cell should span - aligns the content in a cell; "xxx" can be left, right, center, justify, char - vertical aligns the content in a cell; "xxx" can be top, middle, bottom, baseline
- <table> tag defines an HTML table; an HTML table consists of the <table> element and one or more , , and elements; the element defines a table row, the element defines a table header, and the element defines a table cell.
<table width=100%> - defines width (in pixels); deprecated, but without it table will not use entire browser area, and 'align' does not work in following tags
<table cellpadding='"N" cellspacing='"M"> - N is the space between the cell wall and the cell content, M is the space between cells (in pixels)
<table style="border: 3px solid #DDDDDD"> - the width of the borders around a table will be 3 pixels, it will be solid and light grey
<table style="display: none;"> - the table will not be displayed at all
<table id="tblCblTypes"> - specifies a unique id tblCblTypes for the table; it can be used to manipulate table with JavaScript (document.getElementById(`tblCblTypes`)...)
- <form> - HTML form is used to pass data to a server; can contain one or more of the following form elements: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label> (NOTE: The <form> element is a block-level element, and browsers create a line break before and after a form)
<form name="frmCable" method="POST" enctype="multipart/form-data"> - name "frmCable" will be used to reference elements in a JavaScript (WILL BE DEPRECATED IN XHTML, use 'id' instead !); method can be POST (the form-data can be sent as HTTP post) or GET (the form-data can be sent as URL variables); enctype specifies how the form-data should be encoded when submitting it to the server (only for method="post"), can be "application/x-www-form-urlencoded" (default. all characters are encoded before sent, spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values), "multipart/form-data" (no characters are encoded, this value is required when you are using forms that have a file upload control), "text/plain" (spaces are converted to "+" symbols, but no special characters are encoded).
- <input type="hidden" name="returnTo" value="{$smarty.request.returnTo}"> - type can be button, checkbox, file, hidden, image, password, radio, reset, submit, text; name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted; value attribute specifies the value of an <input> element and used differently for different input types: for "button", "reset", and "submit" - it defines the text on the button, for "text", "password", and "hidden" - it defines the initial (default) value of the input field, for "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) (Note1: The value attribute is required with <input type="checkbox"> and <input type="radio">)(Note2: The value attribute cannot be used with <input type="file">).
- <select> - tag is used to create a drop-down list.; the <option> tags inside the <select> element define the available options in the list.
<select size="number"> - specifies the number of visible options in a drop-down list; if the value of the size attribute is greater than "1", but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view
Smarty
- {if isset($smarty.request.id)}Edit Cable{else}Insert new cable{/if} - if statement example; another example:
{if $name eq 'Fred'} Welcome Sir. {elseif $name eq 'Wilma'} Welcome Ma'am. {else} Welcome, whatever you are. {/if}