Maison  >  Article  >  interface Web  >  Comment utiliser HTML et CSS pour implémenter un exemple simple de formulaire d'inscription

Comment utiliser HTML et CSS pour implémenter un exemple simple de formulaire d'inscription

黄舟
黄舟original
2017-07-24 10:24:372764parcourir

Aperçu des effets :


Implémentation de code spécifique

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>提交用户信息</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body, p, td, input {font-size:12px; margin:0px; }
select {height:20px; width:300px; }
.title {font-size: 16px; padding: 10px; width:80%; }
.text {height:20px; width:300px; border:1px solid #AAAAAA; }
.line {margin:2px; }
.leftp {width:110px; float:left; height:22px; line-height:22px; font-weight:bold; }
.rightp {height:42px; }
.button {
color:#fff;
font-weight:bold;
font-size: 11px; 
text-align:center;
padding:.17em 0 .2em .17em;
border-style:solid;
border-width:1px;
border-color:#9cf #159 #159 #9cf;
background:#69c url(images/bg-btn-blue.gif) repeat-x;
}
</style>
</head>
<body>
<form action="/servlet/servlet/PostServlet" method="POST">
<p align="center">
<br/>
<fieldset style=&#39;width:90%&#39;>
<legend>填写用户信息</legend>
<br/>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请填写您的姓名:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="name" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请填写您的密码:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="password" name="password" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请再次输入密码:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="password" name="passwordConfirm" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择性别:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="radio" name="sex" value="男" id="sexMale">
<label for="sexMale">男</label>
<input type="radio" name="sex" value="女" id="sexFemale">
<label for="sexFemale">女</label>
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请输入年龄:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="age" class="text">
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请输入生日:</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="birthday" class="text"> 
<br/>格式:"yyyy-mm-dd"
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择您的爱好</p>
<p align="left" class=&#39;rightp&#39;>
<input type="checkbox" name="interesting" value="音乐影视" id="i1">
<label for="i1">音乐影视</label> 
<input type="checkbox" name="interesting" value="外出旅游" id="i2">
<label for="i2">外出旅游</label> 
<input type="checkbox" name="interesting" value="社交活动" id="i3">
<label for="i3">社交活动</label> 
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择省市:</p>
<p align="left" class=&#39;rightp&#39;>
<select name="area">
<option>---请选择省份---</option>
<optgroup label="北京市">
<option value="北京市海淀区">海淀区</option>
<option value="北京市朝阳区">朝阳区</option>
<option value="北京市东城区">东城区</option>
<option value="北京市西城区">西城区</option>
</optgroup>
<optgroup label="山东省">
<option value="山东省济南市">济南市</option>
<option value="山东省青岛市">青岛市</option>
<option value="山东省潍坊市">潍坊市</option>
</optgroup>
</select>
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>自我描述:</p>
<p align="left" class=&#39;rightp&#39;>
<textarea name="description" rows="4" style="width:300px; ">请填写其他资料... </textarea>
</p>
</p>
<br/>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;></p>
<p align="left" class=&#39;rightp&#39;>
<br/><input type="submit" name="btn" value=" 提交信息 " class="button"><br/>
</p>
</p>
</fieldset>
</p>
</form>
</body>
</html>

Analyse de code

Déclaration de type de document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ce code est appelé une instruction DOCTYPE. DOCTYPE est l'abréviation de type de document et est utilisée pour indiquer la version de XHTML ou HTML que vous utilisez. Cela indique que vous utilisez la version "HTML 4.01". Les versions similaires sont :

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


Cela indique que ce document utilise la version XHTML 1.0. 🎜>La balise HTMLc9ccee2e6ea535a969eb3f532ad9fe89

c9ccee2e6ea535a969eb3f532ad9fe89 définit le style du document.

Si vous devez référencer une feuille de style dans le document, vous devez définir une feuille de style externe, puis utiliser 2cdf5bf648cf2f33323966d7f58a7f3f


Conseils :

En HTML5, tous les éléments ne prennent pas en charge l'

attribut de style Si vous devez ajouter un style à un. élément, veuillez utiliser l'attribut scoped dans l'élément de style. Remarque :

Si l'attribut scoped n'est pas défini, l'élément c9ccee2e6ea535a969eb3f532ad9fe89 doit être un élément enfant de l'élément head, ou un élément enfant de l'élément noscript (qui est un élément enfant de l'élément head).


Balise HTML391c7a272dfd833f6e89c2f060146754

93f0f5c25f18dab9d176bd4f6de5d30e
    46d5fe1c7617e3914f214aaf043f4ccf
    h1 {color: blue}
    h2 {color: red}
    531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

Balise de légende HTML
  • S'il y a trop d'éléments de formulaire sur une page, nous ferions mieux de les afficher en groupes, tout comme en utilisant la balise
  • pour séparer les paragraphes, vous pouvez utiliser les balises
et

pour regrouper le contenu du formulaire. pfieldsetBalises fieldset - Formulaires de groupe Les balises legend


    fieldset
  • apparaissent par paires, en commençant par

    et se terminant par Fin2b5469ab79cf842344327415c3b3bb95a3ae74428855f48d0438405a4619fe75

    Un formulaire peut avoir plusieurs
  • , chaque paire de
  • est un groupe, et la description de chaque groupe de contenu peut être décrite à l'aide du balise de légende

    2b5469ab79cf842344327415c3b3bb95 2b5469ab79cf842344327415c3b3bb95

    Attributs :
  • Commun -- Attributs généraux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn