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

首页

web前端

html教程

网页设计之5种简单的XHTML网页表单_HTML/Xhtml_网页制作

PHP中文网

May 16, 2016 pm 04:43 PM

&quotinputnametype简单网页网页设计

网页设计之5中简单的XHTML网页表单。技术1：标签三明治将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label
网页设计之5中简单的XHTML网页表单。技术1：标签三明治
将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行，可以选择不把它包含在 label 里面，或者使用硬换行处理。
每种情况都在下面展示了。

当这些看起来比较时髦的时候，W3C 事实上已经含蓄地展示了他们的 label 例子。
主要好处：简单
代码：
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;}

运行结果：
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin-bottom: 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
技术2：懒人
许多开发者采用了这种不正统但是快速简单（用换行隔断标记）的方法。虽然能运行，但是对你的 css 能力有害，因为你不需要任何 css 去实现它。
主要好处：快速
代码：

运行结果： #p#
网页设计之5中简单的XHTML网页表单。技术3：语义先生
web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。
主要好处： 结构化
代码：
ol { list-style: none; padding-left: 0; }
运行结果：
#example3 ol {
list-style: none;
padding-left: 0;
}
技术4：分而治之
假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 p，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。
主要好处：空间的利用
代码：
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; }
运行结果：
#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，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。
主要好处：直观
代码：

运行结果：

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

网页打不开是什么原因Jun 26, 2023 am 11:49 AM

网页打不开的原因有：1、电脑的本地连接被禁用；2、拨号上网帐号与密码输入不正确；3、路由器故障或路由器设置出现问题；4、由DNS错误导致的IE打不开网页；5、hosts文件被修改导致的IE打不开网页；6、IP地址设置错误或者获取失败导致IE打不开网页。

使用JavaScript开发网页投票系统Aug 09, 2023 pm 01:30 PM

使用JavaScript开发网页投票系统摘要：随着互联网的飞速发展，网上投票成为了一种方便快捷的方式，用于收集公众的意见和做出决策。本文将介绍使用JavaScript开发一个简单的网页投票系统，实现了用户可以选择选项并提交投票的功能。介绍:网页投票系统是一个在网页上显示多个选项并允许用户选择的程序。它可以用于许多场景，例如选举投票、产品调查、意见收集等。本文

网页无法访问怎么办Sep 06, 2023 am 09:36 AM

网页无法访问的解决办法有检查网络连接、清除浏览器缓存、检查网页地址、尝试使用其他浏览器、检查服务器状态、检查域名解析、检查防火墙和安全设置和联系网站管理员等。详细介绍：1、检查网络连接，确保网络连接正常，可以尝试打开其他网页或者使用其他设备进行访问，确定是否是网络连接问题，如果其他网页可以正常访问，那么可能是该网页的问题；2、清除浏览器缓存，浏览器缓存可能导致网页无法加载等等。

网页打开慢解决方法Aug 17, 2023 am 10:53 AM

网页打开慢解决方法：1、检查网络连接速度，可以使用在线测速工具来测试网络，可以联系网络服务提供商解决问题；2、可以通过清理浏览器缓存来改善网页打开速度，可以在浏览器的设置中找到清除缓存的选项，并选择清除所有缓存数据；3、在浏览器的插件和扩展程序管理页面，可以尝试禁用浏览器插件和扩展程序；4、网页打开慢还可能与电脑的性能有关，关闭占用系统资源的程序或进程也可以提高网页加载速度。

拥有自我意识的AI：AutoGPTMay 25, 2023 am 10:28 AM

1、引言ChatGPT在当下已经风靡一时，作为自然语言处理模型的佼佼者，ChatGPT的优势在于其能够生成流畅、连贯的对话，同时还能够理解上下文并根据上下文进行回答。针对不同的应用场景可以进行快速定制，例如，在客服、教育、娱乐等领域中，ChatGPT可以作为智能助手为用户提供便捷的服务和娱乐体验。从GPT-3到GPT-4，我们可以看到在高级推理，输入设置，微调行为和理解更长的上下文信息等方面，ChatGPT在不断的优化训练中已经取得了显著的进展。但是针对于这种交互式的GPT模型，我们更希望看到能

JavaScript 如何实现网页自动轮播功能？Oct 16, 2023 am 09:25 AM

JavaScript如何实现网页自动轮播功能？随着互联网的普及，网页的设计和展示方式也越来越丰富多样。其中，网页自动轮播功能成为了许多网站及应用中常见的元素之一。本文将介绍如何使用JavaScript实现网页自动轮播功能，并提供具体的代码示例。一、HTML结构在实现自动轮播功能之前，首先需要确定网页的HTML结构。一般来说，自动轮播功能常使用图片或其他内

win10网络被禁用了怎么打开网页Jun 29, 2023 pm 05:37 PM

win10网络被禁用了怎么打开网页？使用win10系统的时候，发现网络被禁用了，就没有办法使用电脑，这种情况应该如何解决。很多小伙伴不知道怎么操作，小编下面整理了windows10网络被禁用了恢复教程，如果你感兴趣的话，跟着小编一起往下看看吧！win10网络被禁用了怎么打开1、在状态栏右边找到网络连接图标之后，右键点击它，然后选择“打开网络和Internet设置”选项并点击2、打开之后在出现的界面右边，找到并点击打开网络和共享中心3、点击更改适配器设置这个选项，找到被禁用的网络，右键点击它4、选

如虎添翼，六个让你效率翻倍的ChatGPT插件May 17, 2023 pm 02:28 PM

ChatGPT是一个超强的AI应用程序，OpenAI已经发布的GPT-4引起了更广泛的关注。ChatGPT是由OpenAI开发的专门从事对话的AI聊天机器人，其主要目标是使AI系统更自然地进行互动。大家可能都已经尝试过ChatGPT，今天讲一讲与这个全新工具互动的不同方法。本文总结了6个可以使ChatGPT成为日常助手（甚至超越日常助手）的工具！1.【GoogleChromeExtension】在任何地方使用ChatGPT想在任何地方轻松地使用ChatGPT吗？那么你可以使用Chrome插件（h

See all articles