网页中的表单的进阶使用教程

发布时间：2023-12-25 11:18:18 所属栏目：教程来源：DaWei

导读： 表单在网页设计和交互中的重要性不言而喻，在今天的网页设计中，网页中无大大小小用到表单的地方不计其数。表单中的内容也越来越丰富。只学习了上一节当中的图像按钮，文本域是远远不够的。

表单在网页设计和交互中的重要性不言而喻，在今天的网页设计中，网页中无大大小小用到表单的地方不计其数。表单中的内容也越来越丰富。只学习了上一节当中的图像按钮，文本域是远远不够的。因此，这节老师还要带领大家学习一些表单中新的元素。具体包括表单中的单选按钮，复选框，密码框元素。这些元素的使用将再一次极大地丰富了我们构建的web 网页。

单选按钮，顾名思义，就是在一堆相似的按钮中你只能点击选择一个。按钮的形状可以是空心圆点状，可以是空心正方形等等，还可以是其他的自定义形状，这就有赖大家在生活中电脑上或者手机端网页中多多寻找，多多观察，肯定能发现不少这样的选项按钮。

那么我们今天要讲的并不是单选按钮的具体实现原理。而是如何通过我们主要描述的 Dreamweaver CC 2018 来设置单选按钮。下面就请跟随老师的操作步骤，来看一下在Dreamweaver CC 2018中操作设置一个单选按钮有多么的方便和神奇吧？

首先，我们先创建一个空白的 HTML 文档。

第二步：我们还是去右边的面板中把 HTML 切换为表单，这样下方的弹出列表中就都是与表单相关的元素了。我们切换完成后，可以看到里面有很丰富的内容。

我们滑动鼠标滚轮向下滑，就能看到一个单选按钮的选项。没错，点击它，我们可以看到如下图一样的效果，随着你反复的点击单选按钮选项，出现了一个接一个的单选按钮，同时，代码视图中也出现了响应的变化。观察变化，我们可以总结到单选按钮代码的写法。

好了，以上就是我们应该掌握的单选按钮的插入方法。是不是似曾相识并且很简单？我们只要紧跟老师的操作，相信大家都能够很好地掌握的。

复选框，这个在网页中的表单也十分常见，它和上面的单选按钮能够形成一个鲜明的对比。鲜明的对比就在于一个是只能选一个，一个则能选择多个按钮，实现了最终的复选。下面就跟随老师的操作步骤来看一下复选的设置：

方法和之前的单选按钮设置基本完全相同。我们首先还是要创建一个空白的ＴＭＬ　文档来承载这个表单。

创建完表单后去右侧的面板中寻找复选框选项。点击之后可以看到屏幕上会不断的出现　ｃｈｅｃｋｂｏｘ，这个就是复选框的英文名字。

以上就是复选框的设置思路，相比单选框，复选框提供给用户选择的机会更多，更充分。

（编辑：武陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!