Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html & Css #6 : formulaires

651 views

Published on

Html & Css #6 : formulaires

Published in: Software
  • Be the first to comment

  • Be the first to like this

Html & Css #6 : formulaires

  1. 1. Les formulaires
  2. 2. 1. Structure html
  3. 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. 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. 5. form (2) <form> <!-- Contenu du formulaire --> </form>
  6. 6. Attributs du formulaire (1) <form method="GET" action="toto.php"> <!-- Contenu du formulaire --> </form>
  7. 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. 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. 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. 10. textarea (1) The textarea tag defines a multi-line text input control. Source : w3.org
  11. 11. textarea (2) <form method="GET" action="toto.php"> <textarea></textarea> </form>
  12. 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. 13. label (2) <form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" /> </form>
  14. 14. 2. Attributs
  15. 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. 16. size (2) <form method="GET" action="toto.php"> <label for="nom">Nom : </label> <input type="text" id="nom" size="100" /> </form>
  17. 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. 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. 19. value (1) The value content attribute gives the default value of the input element. Source : w3.org
  20. 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. 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. 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. 23. required (1) The required attribute is a boolean attribute. When specified, the element is required. Source : w3.org
  24. 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. 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. 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. 27. Merci pour votre attention.

×