html5数据页面设计,网页设计之5种简单的XHTML网页表单

网页设计之5种简单的XHTML网页表单

互联网   发布时间：2000-01-01 00:00:00   作者：佚名   我要评论

网页设计之5中简单的XHTML网页表单。

技术1：标签三明治

将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label

网页设计之5中简单的XHTML网页表单。

技术3：语义先生

web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。

主要好处：结构化

代码：

ol {

list-style: none;

padding-left: 0;

}

Contact Form

1. Name
2. Email
3. Choices (radio)

   Choice 1

   Choice 2

   Choice 3

4. Choices (checkbox)

   Choice 1

   Choice 2

   Choice 3

5. Question

   Option 1Option 2Option 3

6. Message

运行结果：

#example3 ol {

list-style: none;

padding-left: 0;

}

技术4：分而治之

假如你采取将横向表单，需要何种形式？很多情况(客户)会要求横向表单。我们可以依赖的是老伙伴 div，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。

主要好处：空间的利用

代码：

label, input, select, textarea {display: block;}

label {margin-bottom: 10px;}

input[type="radio"], input[type="checkbox"] {display: inline;}

.form-column {

width: 150px;

height: 250px;

padding-left: 20px;

border-left: 1px solid #ccc;

float: left;

}

Contact Form

Name

Email

Choices (radio)

Choice 1

Choice 2

Choice 3

Choices (radio)

Choice 1

Choice 2

Choice 3

Choices (checkbox)

Choice 1

Choice 2

Choice 3

Question

Option 1Option 2Option 3

运行结果：

#Example4 label,#Example4 input, #Example4 select, #Example4 textarea {display: block;}

#Example4 label {margin-bottom: 10px;}

#Example4 input[type="radio"], #Example4 input[type="checkbox"] {display: inline;}

#Example4 .form-column {

width: 150px;

height: 250px;

padding-left: 20px;

border-left: 1px solid #ccc;

float: left;

}

技术5：老学究似的懒人

如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。

主要好处：直观

代码：

Contact Form

Name Email Choices (radio) Choice 1 Choice 2 Choice 3

Choices (checkbox) Choice 1 Choice 2 Choice 3 Question Option 1Option 2Option 3

Message

运行结果：

相关文章

这篇文章主要介绍了html父子页面iframe双向发消息的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-10-12

这篇文章主要介绍了如何在HTML里加载摄像头，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-29

这篇文章主要介绍了html-webpack-plugin使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-15

这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-02

这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友2020-08-20

这篇文章主要介绍了前端html换肤功能的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-20

这篇文章主要介绍了多个HTML页面共同调用一段html代码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML table行距的改变方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-31

这篇文章主要介绍了HTML Table 空白单元格补全的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2020-07-31

最新评论