（10）用css建立表单_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

（10）用css建立表单_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:15 AM

1、用css建立表单

本篇资料主要介绍使用css设置表单元素的方法。

表单是网页与用户交互所不可缺少的元素，表单是网页的访问者进行交互的接口，例如大家都常遇到的：网上注册、网上登录、网上交易、网上投票、网站留言板等。

表单用于向服务器传输数据。

表单中的元素很多，包括常用的输入框、文本框、单选项、复选框、下拉菜单、和按钮等。

html部分：

Form：定义表单的范围。

Input：定义表单中的各个具体表单元素。

name：名称，设定此一栏的名称，程式中常会用到。

size：数值，设定此一栏位显现的宽度。

value：预设内容，设定此一栏位的预设内容。

align：对齐方式，设定此一栏位的对齐方式。

maxkength：数值，设定此一栏位可设定输入的最大长度。

文本输入框：

将type属性设置为text，就会产生文本框。

<p> 姓名：<input type="text"></p>

密码输入框：

将type属性设置为password时，就会产生一个密码输入框。

<p>密码：   <input type="password">   </p>   <p>确认密码：   <input type="password">   </p>

单选按钮：

将type属性设置为radio，就会产生单选按钮。

《单选按钮》<p>性别：   <input type="radio" name="gender" value="radio"checked="true">男         <input type="radio" name="gender" value="radio">女   </p>

复选按钮：

将type属性设置为checkbox时，就会产生复选按钮。

《复选按钮》<p>专业：   <input type="checkbox" name="interest">美术类   <input type="checkbox" name="interest">理科类   <input type="checkbox" name="interest">文科类   <input type="checkbox" name="interest">体育类  </p>

按钮：

将type属性设置为submit时，即为“提交按钮”；将type设置为reset时，即为重置按钮。

《提交按钮》<p>   <input type="submit" value="注册提交">   <input type="reset" value="重置内容"> </p>

上面介绍的都是使用标记的，关键在于type属性的值是什么！

多行文本框：

若需要访问者输入较多的文字的话，通常使用多行文本框，使用/标记来实现的。

《多行文本框》  <p>  <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>  </p>

下拉列表框（下拉的菜单）

下拉列表框是使用

《下拉列表框》  <p>城市地址：  <select name="select" size="4" id="select">  <option value="1">中国北部地区</option>  <option value="2">中国南部地区</option>  <option value="3">中国东部地区</option>  <option value="4">中国西部地区</option>  </select>  </p>

至此，简单的案例就全部完成了。为了方便读者分析，将上面的代码全部合起来，进行看效果图。

简单的案列：

     恋爱交友网        <p> 姓名：<input type="text"></p>   <p>密码：   <input type="password">   </p>   <p>确认密码：   <input type="password">   </p>   性别：       男             女   
   专业：       美术类       理科类       文科类       体育类   
  城市地址：    
  特长：

效果图：

css部分：

1、先来看一份“简单案例2”：

<!DOCTYPE html><head><title>表单</title><style><!--form{                               /*设置整个表单样式*/    border: 2px dotted #AAAAAA;    padding: 1px 6px 1px 6px;    margin:0px;    font:14px Arial;}input{                            /* 所有input标记 */    color: #00008B;    }input.txt{                        /* 文本框单独设置 */    border: 1px inset #00008B;    background-color: #ADD8E6;}input.btn{                        /* 按钮单独设置 */    color: #00008B;    background-color: #ADD8E6;    border: 1px outset #00008B;    padding: 1px 2px 1px 2px;}select{                            /*设置下拉列表框*/    width: 80px;    color: #00008B;    background-color: #ADD8E6;    border: 1px solid #00008B;}textarea{                              /*设置多行文本框*/    width: 200px;    height: 40px;    color: #00008B;    background-color: #ADD8E6;    border: 1px inset #00008B;}--></style>   </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color">    <option value="red">红</option>    <option value="green">绿</option>    <option value="blue">蓝</option>    <option value="yellow">黄</option>    <option value="cyan">青</option>    <option value="purple">紫</option></select><br /></p><p>请问你的性别:<br>    <input type="radio" name="sex" id="male" value="male" class="rad">男<br>    <input type="radio" name="sex" id="female" value="female" class="rad">女<br /></p><p>你喜欢做些什么:<br>    <input type="checkbox" name="hobby" id="book" value="book" class="check">看书    <input type="checkbox" name="hobby" id="net" value="net" class="check">上网    <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉<br /></p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn"></p></form></body></html>

1、首先body部分十分简单，就一个简单的表单结构；

2、设置整个表单的样式，给表单加一个边框，设置一下内边距和外边距，再设置表单里用14像素的Arial字体；

3、给所有的输入框中的字添加同一种颜色；

4、给带有“txt”类别的标记单独设置 1像素的深蓝色内陷边框，给背景上个浅天蓝色；

5、给带有“btn”类别的标记单独设置字体颜色为“深蓝色”、背景色为“浅天蓝色”、添加1像素的深蓝色外凸边框、内边距；

6、给下拉菜单设置宽度，里面的字体设置为“深蓝色”，背景色为“浅天蓝色”，添加1像素的深蓝色实线边框；

7、给多行文本框设置宽度、高度，里面的字体设置为“深蓝色”，背景色为“浅天蓝色”，添加1像素的深蓝色实线边框；

效果图：

2、对齐文本框和旁边的图像按钮

一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐，即使使用 vertical-align、padding和margin等都不行（特别是在IE中，Firefox中使用vertical-align还可以）。

“简单案例3”：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <title>搜索框</title> </head> <body> <form>  <input type="text" name="foo" value="Test Field"/> <input type="image" src="按钮.png" /> </form>  </body></html>

效果图：

上图中完全不对称，解决方案非常简单，只要给图片来个绝对定位，上述代码修改为：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <title>搜索框</title> </head> <body> <form> <input type="text" name="foo" value="Test Field"/> <input type="image" src="搜索框.png" style="position:absolute"/> </form>    </body></html>

效果图：

IE浏览器 Firefox浏览器

到这里，在竖直方向经对齐得很好了，水平方向上；在Firefox和IE中，还略有区别，在Firefox中二者紧靠在一起，在IE中，二者之间有一点点间隔。

本篇学习资料主要介绍表单的制作，以及使用css设置表单元素的方法。

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles