Html & Css #6 : formulaires
-
Upload
jean-michel -
Category
Software
-
view
329 -
download
2
description
Transcript of Html & Css #6 : formulaires
Les formulaires
1. Structure html
A quoi sert un formulaire ?
A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation).Source : w3.org
form (1)
The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.Source : w3.org
form (2)
<form> <!-- Contenu du formulaire --> </form>
Attributs du formulaire (1)
<form method="GET" action="toto.php"> <!-- Contenu du formulaire --> </form>
Attributs du formulaire (2)
Action :- Page de traitement du formulaire - ex : traitement.php
Method :- get : transfert des données par l’url - post : transfert «invisible» des données
input (1)
The input element represents a typed data field, usually with a form control to allow the user to edit the data.Source : w3.org
input (2)
<form method="GET" action="toto.php"> <input type="hidden" /> <input type="text" /> <input type="email" /> <input type="password" /> <input type="checkbox" /> <input type="radio" /> <input type="submit" /> </form>
textarea (2)
<form method="GET" action="toto.php"> <textarea></textarea> </form>
label (1)
The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.Source : w3.org
label (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" /> </form>
2. Attributs
size (1)
The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value.Source : w3.org
size (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" size="100" /> </form>
maxlength / minlength (1)
A form control maxlength attribute declares a limit on the number of characters a user can input.Source : w3.org
A form control minlength attribute declares a lower bound on the number of characters a user can input.Source : w3.org
maxlength / minlength (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" minlength="3" maxlength="10" /> <input type="submit" /> </form>
value (1)
The value content attribute gives the default value of the input element.Source : w3.org
value (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" value="sheldon" /> <input type="submit" value="Enregistrer" /> </form>
readonly (1)
The readonly attribute is a boolean attribute that controls whether or not the user can edit the form control. Source : w3.org
readonly (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" value="sheldon" readonly="readonly" /> <input type="submit" /> </form>
required (1)
The required attribute is a boolean attribute. When specified, the element is required.Source : w3.org
required (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" required="required" /> <input type="submit" /> </form>
placeholder (1)
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.Source : w3.org
placeholder (2)
<form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" placeholder="sheldon" /> <input type="submit" /> </form>
Merci pour votre attention.