html & css #6 : formulaires

27
Les formulaires

Upload: jean-michel

Post on 05-Jul-2015

313 views

Category:

Software


2 download

DESCRIPTION

Html & Css #6 : formulaires

TRANSCRIPT

Page 1: Html & Css #6 : formulaires

Les formulaires

Page 2: Html & Css #6 : formulaires

1. Structure html

Page 3: Html & Css #6 : formulaires

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

Page 4: Html & Css #6 : formulaires

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

Page 5: Html & Css #6 : formulaires

form (2)

<form> <!-- Contenu du formulaire --> </form>

Page 6: Html & Css #6 : formulaires

Attributs du formulaire (1)

<form method="GET" action="toto.php"> <!-- Contenu du formulaire --> </form>

Page 7: Html & Css #6 : formulaires

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

Page 8: Html & Css #6 : formulaires

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

Page 9: Html & Css #6 : formulaires

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>

Page 10: Html & Css #6 : formulaires

textarea (1)

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

Page 11: Html & Css #6 : formulaires

textarea (2)

<form method="GET" action="toto.php"> <textarea></textarea> </form>

Page 12: Html & Css #6 : formulaires

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

Page 13: Html & Css #6 : formulaires

label (2)

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

Page 14: Html & Css #6 : formulaires

2. Attributs

Page 15: Html & Css #6 : formulaires

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

Page 16: Html & Css #6 : formulaires

size (2)

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

Page 17: Html & Css #6 : formulaires

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

Page 18: Html & Css #6 : formulaires

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>

Page 19: Html & Css #6 : formulaires

value (1)

The value content attribute gives the default value of the input element.Source : w3.org

Page 20: Html & Css #6 : formulaires

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>

Page 21: Html & Css #6 : formulaires

readonly (1)

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

Page 22: Html & Css #6 : formulaires

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>

Page 23: Html & Css #6 : formulaires

required (1)

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

Page 24: Html & Css #6 : formulaires

required (2)

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

Page 25: Html & Css #6 : formulaires

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

Page 26: Html & Css #6 : formulaires

placeholder (2)

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

Page 27: Html & Css #6 : formulaires

Merci pour votre attention.