Einführung in verschiedene Formularstile in HTML

Oft verwenden wir Formulare nur, um die Funktion der Datenerfassung zu erkennen. Die Formulare, die wir oft sehen, sind „einheitlich“ und leblos. Dieses Thema versucht, dieses Phänomen zu ändern und zu stärken Bilden Sie einen farbenfrohen Look.
Das Aussehen des Formulars ist auch der direkteste Trick, der durch Ändern erreicht werden kann. Dieser Artikel wird von zwei Ausgangspunkten aus beschrieben: CSS-Magie und Bildmagie.

1. CSS-Magie

CSS ist das bekannte Cascading Style Sheet, das das Erscheinungsbild von Seitenelementen, einschließlich Schriftarten, definieren kann , Hintergrundfarbe und Bildstil, Rahmenstil, Füllstil, Rahmenstil usw. Ausgehend von diesen Aspekten besprechen wir, wie man CSS auf das Formular anwendet, um es vollständig zu verschönern!

　1.1 Anwendung von Schriftstilen

Zu den Schriftstilen gehören: Schriftfamilie, Schriftstil, Schriftvariante (Schriftvariante), Schriftart Fett (Schriftstärke), Schriftgröße (Schriftgröße), Schriftart (Schriftart), die spezifische Definitionsmethode wird hier nicht im Detail beschrieben, Sie können sich auf deren Informationen beziehen.
Vielleicht ist Ihnen aufgefallen, dass der Text auf der Schaltfläche nicht schön ist, was tatsächlich durch CSS-Schriftstile gelöst werden kann. Ähnliches gilt für mehrere andere Formularelemente, die Text beinhalten, wie z. B. Textfelder, Schriftstile kann auf mehrzeilige Textfelder, Passwortfelder und Dropdown-Auswahlfelder angewendet werden.
Um diese Anwendungen vollständig zu demonstrieren, wurden in den folgenden Beispielen mehrere Stile speziell entworfen. In tatsächlichen Anwendungen ist keine Unordnung erforderlich und sie können flexibel verwendet werden:

Beispiel 12: Schriftstilanzeige von Formularelementen
Analyse:

• im Textfeld Der Text ist fett, die Größe beträgt 9pt, die Schriftart ist Song Dynasty, Code:
  

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

• The Der Text des Passwortfelds ist rot, Code:
  

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

• Die Textfarbe des Dropdown-Felds ist rot, die Schriftart ist Verdana, die Größe ist 9pt, 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＞

• Die Schriftart des mehrzeiligen Textfelds ist Verdana, unterstrichen, die Größe ist 9pt, 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＞

• Der Text der Schaltflächen „Senden 1“ und „Senden 2“ ist unterschiedlich, da die Schaltfläche „Senden 1“ 9pt Song Dynasty-Text verwendet ist schöner. Der Code der Schaltfläche „1 senden“:
  ＜input type="submit" name="Submit" value="Send 1" style="font-family:宋体; font-size: 9pt;"＞

Zusammenfassung : Solange wir mit dem Schriftstil vertraut sind, kann er flexibel und veränderbar sein. Es ist nicht erforderlich, ihn zu verwenden Stil, um ihn im Tag zu definieren, oder extern auf die CSS-Datei verweisen und bei Verwendung zitieren. Der gewünschte Effekt kann mit einem Klick erzielt werden.

1.2 Anwendung von Hintergrundfarbe und Bildstil

Es kommt häufig vor, dass Webseiten die Hintergrundfarbe und das Bild des Formulars ändern müssen Aufgrund der Farbanpassung verwenden Sie zum Entwerfen des Stils das Attribut „Hintergrundfarbe“ für die Hintergrundfarbe und das Attribut „Hintergrundbild“ für das Hintergrundbild. Farben und Bilder können auch unerwartete Effekte erzeugen.

Beispiel 13: Hintergrundanzeige von Formularelementen

Analyse:

• Der Hintergrund des Textfelds ist schwarz und die Schriftart ist weiß. 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没有效果以外，其它的都可以配合网页的背景来设置它们。

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Formularstile in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!