Html & Css #6 : formulaires

1. Les formulaires

2. 1. Structure html

3. 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

4. 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

5. form (2)
<form>
<!-- Contenu du formulaire -->
</form>

6. Attributs du formulaire (1)
<form method="GET" action="toto.php">
<!-- Contenu du formulaire -->
</form>

7. Attributs du formulaire (2)
Method :
- get : transfert des données par l’url
- post : transfert «invisible» des données
Action :
- Page de traitement du formulaire
- ex : traitement.php

8. 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

9. 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>

10. textarea (1)
The textarea tag defines a multi-line text
input control.
Source : w3.org

11. textarea (2)
<form method="GET" action="toto.php">
<textarea></textarea>
</form>

12. 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

13. label (2)
<form method="GET" action="toto.php">
<label for="nom">Nom : </label>
<input type="text" id="nom" />
</form>

14. 2. Attributs

15. 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

16. size (2)
<form method="GET" action="toto.php">
<label for="nom">Nom : </label>
<input type="text" id="nom" size="100" />
</form>

17. 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

18. 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>

19. value (1)
The value content attribute gives the default
value of the input element.
Source : w3.org

20. 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>

21. readonly (1)
The readonly attribute is a boolean attribute
that controls whether or not the user can
edit the form control.
Source : w3.org

22. 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>

23. required (1)
The required attribute is a boolean attribute.
When specified, the element is required.
Source : w3.org

24. required (2)
<form method="GET" action="toto.php">
<label for="nom">Nom : </label>
<input type="text" id="nom" required="required" />
<input type="submit" />
</form>

25. 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

26. placeholder (2)
<form method="GET" action="toto.php">
<label for="nom">Nom : </label>
<input type="text" id="nom" placeholder="sheldon" />
<input type="submit" />
</form>

27. Merci pour votre attention.