Exemple de formulaire en HTML

De Analyse Développement Hacking
Sauter à la navigation Sauter à la recherche

Le wiki : Accueil - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack

Le site : Accueil - Annuaire - Blog - Forum - Outils - Utilisateur
Le FTP : Consulter les fichiers partagés sur le FTP
Le Redmine : Consulter le Redmine

Exemple de formulaire en HTML

Tous les objets de formulaire en HTML 5

Source : https://www.scriptol.fr/html5/formulaire.php

Taille input et textarea

<html>
<head>

<style>
body {
    padding: 100px;
    background-color: #efefef;
}
input {
    width: 80%;
    margin: 0;
}
textarea {
    width: 80%;
    height: 100px;
    margin: 0;
}
</style>

</head>
<body>
<input type="text" value="input" />
<textarea cols="" rows="">textarea</textarea> </body> </html>

Personnalisation d'un formulaire XHTML avec CSS

Source : https://a-pellegrini.developpez.com/tutoriels/css/formulaire/

Largeur ok pour mobile et prise en compte du zoom utilisateur

Source : https://dmouronval.developpez.com/tutoriels/html/formulaires-html5/

Exemple de modélisation des données avec un formulaire HTML

Le formulaire suivant n'est pas formaté avec les CSS.
Il n'utilise pas les balises HTML5.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Vidéothèque / Ajout de film</title>

</head>

<body>

Ajout d'un film

<form action="traitement_ajout_film.php" method="POST">

Titre <input name="titre" type="text" width="300" maxlength="50" />
Titre Original <input name="titreo" type="text" width="300" />
Date <select name="jour" id="jour">

<option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="mois" id="mois"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select name="annee" id="annee"> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> <option value="1909">1909</option> <option value="1908">1908</option> <option value="1907">1907</option> <option value="1906">1906</option> <option value="1905">1905</option> <option value="1904">1904</option> <option value="1903">1903</option> <option value="1902">1902</option> <option value="1901">1901</option> <option value="1900">1900</option>

</select> JJ/MM/AAAA
Durée <label>

<input name="heure" type="text" id="heure" value="0" size="3" maxlength="1" />

<input name="minute" type="text" id="minute" value="00" size="4" maxlength="2" />

HH:MM</label>
Réalisateur <input name="real" type="text" width="300" />
Acteurs <input name="act" type="text" width="300" />
Pays <input name="pays" type="text" width="300" />
Genre <input name="genre" type="text" width="300" />
Support <select name="support" >

<option value="DVD">DVD</option> <option value="VHS">Cassette VHS</option> <option value="film35">Film 35 mm</option>

</select>
Résumé <textarea name="resum" cols="50" rows="10" ></textarea>
<input type="submit" name="Submit" value="Envoyer" />

</form>

<a href="menu.php">Retour au menu</a>

</body> </html>

Récupérer des informations avec input hidden

<input type="hidden" name="accessid" value="<?echo $accessid ?>">
<input type="hidden" name="pays" value="<?echo $pays ?>">
<input type="hidden" name="ville" value="<?echo $ville ?>">
<input type="hidden" name="postal" value="<?echo $postal ?>">
<input type="submit" value="Valider votre référencement !" name="submit">

NAVIGATION

PARTICIPER ET PARTAGER

Bienvenue sur le wiki de Vision du Web.
De nombreuses pages sont partagées sur ce wiki.
Créer un compte utilisateur pour participer sur le wiki.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Utiliser la recherche interne du wiki pour trouver votre contenu.
La page de discussion de VisionDuWeb vous permet de poser une question.
Utiliser la recherche interne du site pour chercher dans tout le contenu.
Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique.
Protéger votre système Linux ou Windows en lisant la page dédié à la sécurité.
Améliorer le contenu des pages avec vos propositions depuis l'onglet discussion.

SOUTENIR CE WIKI

Soutenir le wiki avec un don en monnaie numérique :
AEON - Bitcoins - Bitcoins Cash - Bitcoins Gold - Bitcore - Blackcoins - Basic Attention Token - Bytecoins - Clams - Dash - Monero - Dogecoins - Ğ1 - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash

OBTENIR DE LA MONNAIE NUMERIQUE

Obtenir gratuitement de la monnaie numérique :
Gagner des Altcoins - Miner des Altcoins.