COMP7306: Web technologies Server-side Web programming 6 February - PowerPoint PPT Presentation

COMP7306: Web technologies Server-side Web programming 6 February 2013 1 / 73 Pierre Senellart Licence de droits d’usage

Outline HTML forms Principles Input fields Server-side languages An example: PHP Introduction to database management systems Conclusion 6 February 2013 2 / 73 Pierre Senellart Licence de droits d’usage

Outline HTML forms Principles Input fields Server-side languages An example: PHP Introduction to database management systems Conclusion 6 February 2013 3 / 73 Pierre Senellart Licence de droits d’usage

Web forms Allow interaction with the user through the input of information In HTML: only the interface of the form Most of the work will be carried out by the script that will process the form submission, on the server side 6 February 2013 4 / 73 Pierre Senellart Licence de droits d’usage

<form> tag An HTML form is the content of a <form> tag Following attributes: action URL of the script that will process the form method HTTP method, either "get" or "post" enctype HTTP parameter encoding "application/x-www-form-urlencoded" (by default) or "multipart/form-data" Example (Elementary form) <form action="action.php" method="get"> <div><input type="submit"></div> </form> 6 February 2013 5 / 73 Pierre Senellart Licence de droits d’usage

Field sets In HTML, impossible to put form fields (inside elements) directly inside a <form> . They have to be put inside blocks first: Inside <p> tags if form fields are naturally inside text paragraphs (rare) Inside <fieldset> to regroup semantically close form fields Inside <div> blocks without any specific semantics otherwise Example (Field set) <fieldset> <legend>Size</legend> <input type="text" name="height"> <input type="text" name="width"> </fieldset> 6 February 2013 6 / 73 Pierre Senellart Licence de droits d’usage

Labels Most fields are naturally accompanied by their labels ( <label> ). The label can be anywhere, usually directly to the left or to the right of the field Its for attribute references the id attribute of the corresponding field Inside a Web browser, clicking on the field label allows focusing on the field Example (Label) <label for="width">Width:</label> <input type="text" name="width" id="width"> 6 February 2013 7 / 73 Pierre Senellart Licence de droits d’usage

Outline HTML forms Principles Input fields Server-side languages An example: PHP Introduction to database management systems Conclusion 6 February 2013 8 / 73 Pierre Senellart Licence de droits d’usage

Input fields The <input> tag has a vast range of use in Web forms. It represents a form field The type attribute is the type (text, password, confirmation button, etc.) of field. The name attribute (name of the HTTP parameter) is compulsory (except for types "reset" and "submit" ); it is used to specify to the server which parameter a value corresponds to Example (Text field to enter comments) <input type="text" name="comment"> 6 February 2013 9 / 73 Pierre Senellart Licence de droits d’usage

Single-line text input type ="text" is used for inputting text fitting on a single line The value attribute can be used to specify the default value (optional) The maximum length of the string to input can be set with the maxlength attribute (optional) Example <input type="text" name="fname" value="John" maxlength="50"> 6 February 2013 10 / 73 Pierre Senellart Licence de droits d’usage

Password input type ="password" is used for inputting a text whose characters should be masked: generally used for entering passwords. The password is still transmitted to the server in plain text! The value attribute can be used to specify the default value (optional) The maximum length of the string to input can be set with the maxlength attribute (optional) Example <input type="password" name="pwd" value="12345678"> 6 February 2013 11 / 73 Pierre Senellart Licence de droits d’usage

Multiple choices among a list type ="checkbox" allows choosing several elements among a list Appears as boxes to check The returned value is necessarily given with the value attribute checked ="checked" specifies that the check box should be pre-checked In PHP , multiple choice input field parameter names should end with [] Example <input type="checkbox" name="ad[]" value="site" checked="checked" id="ad-site"> <label for="ad-site">Receive offers from our site</label> <input type="checkbox" name="ad[]" value="external" id="ad-external"> 6 February 2013 <label for="ad-external">Receive offers from other sites</label> 12 / 73 Pierre Senellart Licence de droits d’usage

Single choice among a list type ="radio" allows choosing a single element among a list Displayed as radio buttons The returned value is necessarily given with the value attribute checked ="checked" specifies that a given radio button should be pre-selected Example Receive advertisements: <input type="radio" name="ad" value="yes" id="ad-yes" checked="checked"> <label for="ad-yes">yes</label> <input type="radio" name="ad" value="no" id="ad-no"> <label for="ad-no">no</label> 6 February 2013 13 / 73 Pierre Senellart Licence de droits d’usage

File upload type ="file" allows attaching a file to the form submission Because of the size of the request necessary to upload the file, one has to use the POST method and the multipart/form-data parameter encoding Example <label for="picture">Picture:</label> <input type="file" name="picture" id="picture"> 6 February 2013 14 / 73 Pierre Senellart Licence de droits d’usage

Hidden field type ="hidden" hides to the client some fields, but their content is still sent with the form It can be used to add some fixed information to the form, using the value attribute Attention: nothing prevents the client to send different values than the ones provided! Example <input type="hidden" name="currency" value="EUR"> 6 February 2013 15 / 73 Pierre Senellart Licence de droits d’usage

Resetting a form type ="reset" provides a button that allows resetting the form fields to their default values The value attribute allows changing the text of the corresponding button Example <input type="reset" value="Clear everything"> 6 February 2013 16 / 73 Pierre Senellart Licence de droits d’usage

Submitting a form type ="submit" provides a button for submitting the form The client sends the form at the URL provided in the action attribute of the <form> tag The value attribute allows changing the text of the corresponding button Example <input type="submit" value="Send"> 6 February 2013 17 / 73 Pierre Senellart Licence de droits d’usage

Multiple-line text input For multiple-line text input, one uses the <textarea> tag The text inside this element is the default value of the field The closing tag is compulsory even if the field is empty The rows and cols attributes (compulsory) specify the height and width of the field, in number of characters Example <textarea name="bio" cols="40" rows="5"> Lorem ipsum dolor sit amet, consectetur adipisicing elit </textarea> 6 February 2013 18 / 73 Pierre Senellart Licence de droits d’usage

Selection menus The <select> tag describes a selection list: The optional size attribute is the number of choices appearing simultaneously on the Web page. By default, 1 The multiple ="multiple" attribute allows multiple selections. In this case, in PHP , one always use a parameter name ending with [] . Choices are indicated with the <option> tag: The selected ="selected" attribute specifies the default choice(s) The value attribute is the parameter value associated with this choice Example <select name="age"> <option value="20">under 20</option> <option value="35" selected="selected">21 to 35</option> <option value="50">36 to 50</option> 6 February 2013 <option value="51">over 51</option> </select> 19 / 73 Pierre Senellart Licence de droits d’usage

Outline HTML forms Server-side languages An example: PHP Introduction to database management systems Conclusion 6 February 2013 20 / 73 Pierre Senellart Licence de droits d’usage