Introduction to various styles of Form in HTML

Many times, we only use forms to realize the function of data collection. The forms we often see are "one-size-fits-all" and lifeless. This topic tries to change this phenomenon and try to empower Form a colorful look.
The appearance of the form is also the most direct trick. You can change it to achieve special effects. This article will be described from two starting points: CSS magic and image magic.

1. CSS magic

CSS is the well-known cascading style sheet. It can define the appearance of page elements, including font styles, Background color and image style, border style, filler style, border style, etc., starting from these aspects, we will discuss how to apply CSS to the form to completely beautify it!

1.1 Application of font styles

Font styles include: font-family, font-style, Font variant (font-variant), font bold (font-weight), font size (font-size), font (font), the specific definition method will not be described in detail here, you can refer to its information.
Perhaps you have noticed that the text on the button is not beautiful, which can actually be solved through CSS font styles. Similarly, several other form items involving text, such as text boxes, Font styles can be applied to multi-line text boxes, password boxes, and drop-down selection boxes.
In order to fully demonstrate these applications, the following examples have specially designed several styles. In actual applications, there is no need to be so messy and can be used flexibly:

Sample 12: Font style display of form elements
Analysis:

• in the text box The text is bold, the size is 9pt, the font is Song Dynasty, code:
  

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

• The password box text is red, code:
  

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

• The drop-down box text color is red, the font is Verdana, the size is 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＞

• The font of the multi-line text box is Verdana, underlined, the size is 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＞

• The text of the Send 1 and Send 2 buttons is different because the Send 1 button uses 9pt Song Dynasty text, so it is more beautiful. The code of the Send 1 button:
  

## Summary: As long as we have the right font Once you are familiar with the style, you can be flexible and change it. You don’t have to use style to define it in the tag. You can define it in

, or reference the CSS file externally. When used, you can achieve the desired effect by quoting it.

1.2 Application of background color and image style

Many times, due to color matching, web pages have to change the background color and image of the form. To design the style, use the background-color attribute for the background color and the background-image attribute for the background image. Colors and images can also produce unexpected effects.

Sample 13: Background display of form elements
Analysis:

• The background of the text box is black, the font is white, 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没有效果以外，其它的都可以配合网页的背景来设置它们。

The above is the detailed content of Introduction to various styles of Form in HTML. For more information, please follow other related articles on the PHP Chinese website!