Introduction aux différents styles de formulaire en HTML

Souvent, nous utilisons des formulaires uniquement pour réaliser la fonction de collecte de données. Les formulaires que nous voyons souvent sont « à taille unique » et sans vie. Ce sujet tente de changer ce phénomène et de donner du pouvoir. Formez un look coloré.
L'apparence du formulaire est également l'astuce la plus directe. Des effets spéciaux peuvent être obtenus en le modifiant. Cet article sera décrit à partir de deux points de départ : la magie CSS et la magie de l'image.

1. La magie CSS

CSS est la feuille de style en cascade bien connue, qui peut définir l'apparence des éléments de la page, y compris les styles de police , Couleur d'arrière-plan et style d'image, style de bordure, style de remplissage, style de bordure, etc., à partir de ces aspects, nous discuterons de la façon d'appliquer CSS au formulaire pour l'embellir complètement !

　1.1 Application des styles de police

Les styles de police incluent : famille de polices, style de police, variante de police (variante de police), police gras (font-weight), taille de police (font-size), police (police), la méthode de définition spécifique ne sera pas décrite en détail ici, vous pouvez vous référer à ses informations.
Vous avez peut-être remarqué que le texte sur le bouton n'est pas beau, ce qui peut en fait être résolu grâce aux styles de police CSS. De même, plusieurs autres éléments de formulaire impliquant du texte, tels que les zones de texte, peuvent le faire. être appliqué aux zones de texte multilignes, aux zones de mot de passe et aux zones de sélection déroulantes.
Afin de démontrer pleinement ces applications, les exemples suivants ont spécialement conçu plusieurs styles. Dans les applications réelles, il n'est pas nécessaire d'être aussi compliqué et peuvent être utilisés de manière flexible :

Exemple 12 : Affichage du style de police des éléments de formulaire
Analyse :

• dans la zone de texte Le texte est en gras, la taille est de 9 pt, la police est Song Dynasty, code :
  

• ＜input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋体; font-size: 12px; font-weight: bold" value="加粗"＞

• Le le texte de la zone de mot de passe est rouge, code :
  

• ＜input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"＞

• La couleur du texte de la zone déroulante est rouge, la police est Verdana, le la taille est de 9 pt, code :
  

• ＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞
  ＜option value="2" selected＞yesky.com＜/option＞
  ＜option value="1"＞redidea.net＜/option＞
  ＜/select＞

• La police de la zone de texte multiligne est Verdana, soulignée, la taille est de 9 pt, code :
  

• ＜TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right＞underline css style＜/TEXTAREA＞

• Le texte des boutons Envoyer 1 et Envoyer 2 est différent car le bouton Envoyer 1 utilise du texte Song Dynasty de 9 points, il est plus beau. Le code du bouton Envoyer 1 :
  ＜input type="submit" name="Submit" value="Send 1" style="font-family:宋体; font-size: 9pt;"＞

Résumé  : Tant que nous connaissons le style de police, il peut être flexible et modifiable. style pour le définir dans la balise. Il peut être défini dans , ou référencer le fichier CSS en externe et le citer lorsqu'il est utilisé. L'effet souhaité peut être obtenu en un seul clic.

1.2 Application de la couleur d'arrière-plan et du style d'image

Il arrive souvent que les pages Web doivent changer la couleur d'arrière-plan et l'image du formulaire en raison de la correspondance des couleurs. Pour concevoir le style, utilisez l'attribut background-color pour la couleur d'arrière-plan et l'attribut background-image pour l'image d'arrière-plan. Les couleurs et les images peuvent également produire des effets inattendus.

Exemple 13 : Affichage en arrière-plan des éléments du formulaire

Analyse :

• Le fond de la zone de texte est noir et la police est blanche Code :
  

  .

• ＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞

• 口令框背景是灰色的，代码：
  

• ＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞

• 单选和复选按钮的背景是红色的，代码：
  

• ＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞
  ＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞

• 下拉选择框的选项是丰富多彩的背景，代码：
  

• ＜select name="select2" size="1"＞
  ＜option selected style="background-color: #FF0000"＞yesky.com＜/option＞
  ＜option style="background-color: #0000CC"＞redidea.com＜/option＞
  ＜option style="background-color: #009900"＞chinabyte.com＜/option＞
  ＜option style="background-color: #ff33cc"＞sina.com＜/option＞
  ＜option style="background-color: #999999"＞sohu.com＜/option＞
  ＜/select＞

• 多行文本框的背景是一个图像，代码：
  

• ＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞

• submit1按钮的背景是黄色的，代码：
  

• ＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞

• submit2按钮的背景是一个图像，代码：
  

• ＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞

　　小结：用好background-color属性和background-image属性，就可以设计很出“色”表单了。

1.3 边框样式的应用 

　　也许你觉得表单的边框过于死板，我们能否设计单线条，或者其它的边框样式呢？当然可以！

　　和边框有关的属性有：边框式样border-style、上边框border-top、右边框border-right、下边框border- bottom、左边框border-left、边框颜色border-colr、边框宽度 border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border- bottom-width、左边框宽度border-left-width、边框 border，这里不作详细的讲述，请参考有关资料。

　样例14： 8种边框形式的展示 
　　分析：

• 文本框有8种类型边框样式，即border-style，分别展示在本例中，
  边框宽度的设置有一个规律：

• border-width: [ thin | medium | thick | ＜长度＞ ]{1,4}

边框宽度用一到四个值来设置元素的边框宽度，它们分别被应用于上、右、下和左边框宽度。如果只给出一个值，它被应用于所有边框宽度。如果两个或三个值给出了，省略了的值与对边相等
例如：

＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞

边框颜色的设置有一个规律：
border-colr: ＜颜色＞{1,4}
边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了，它们分别被应用于上、右、下和左边框颜色。如果只给出一个值，它被应用于所有边框颜色。如果两个或三个值给出了，省略了的值与对边相等。

• 对于多行文本框以及按钮，设置边框的方法和文本框一样，不再陈述；

• 由于下拉选择框Select不支持边框的设置，所以对它设置是徒劳的；

• 单选按钮和复选按钮的边框，设置的效果不十分协调，所以建议不要对它们设置，不然有“画蛇添足”之感；

　样例15：边框的特殊设计展示

　　聪明的读者一定会想到，如果设计单边框，一定更加漂亮，对！下面我们来尝试以下部分边框的设置效果，本例仅仅以Solid和dotted两种类型的边框作演示，其它类型的边框原理相同： 注意：边框类型的外观如下：

• none ：无边框。与任何指定的border-width值无关；

• dotted ：点线；

• dashed ：虚线；

• solid ：实线边框；

• double ：双线边框。两条单线与其间隔的和等于指定的border-width值；

• groove ：3D凹槽；

• ridge ：边框突起；

• inset ：3D凹边；

• outset ：3D凸边；

　　2、图像魔法

　　图像，是网页的重要元素，能否应用到表单中呢？接下来，我们用图像来改造死板的表单，分两个部分来探讨：用图像代替按钮、用背景图美化表单元素。

　　2.1 用图像代替按钮

由于默认的表单按钮太丑陋，绝大多数的网站采用了图像按钮，那么，我们通过两个实例来看看怎样实现的：

样例16：用图像代替提交按钮：

　　当只有一个提交按钮的时候，可以简单地实现，不用加事件函数，代码是：

＜input type="image" name="..." src="url" width="" height="..." border="..."＞

　　除了标签改为input type="image"以外，其它的属性和＜img＞标签的属性是一样的，例如： 
　　是不是只要用图片就可以代替所有的按钮呢？是的，不过，不是上面这么简单了，必须加上事件函数，不然的话，图片都是提交按钮，不能完成复位等功能，看看下面的例子就知道了：
样例17：用图片代替所有的表单按钮： 注意：

• 代替submit按钮的图片代码格式是
  

• ＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞

• 代替reset按钮的代码图片格式是
  
  注：这里的formName是表单的name属性值。

• <a href="javascript:document.formName.reset();">＜img border=0 src="..."＞</a>

　　2.2 用背景图美化表单元素

　　其实，前面已经提到过，用background-image:url()属性来定义表单元素的背景图，这里仅举一例，可以看到，除了select没有效果以外，其它的都可以配合网页的背景来设置它们。

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!