红客团队html引导,HTML语言--百度红客吧系列专题课程--24

作者：三月十三

第24节、在表单中使用图形化按钮、单选按钮和复选按钮

上节课我们说的是，在表单中使用单行文本框以及密码框、提交按钮、重置按钮等，今天我们来学习一下使用图形化按钮和单选按钮和复选按钮。

先说使用图形化按钮，意思就是使用一张图片作为一个按钮来使用，这样看起来更美观，它的基本语法是这样的：

src="图像的位置" name="字符串" value="字符串">

其中，type的值为image，这意思就是说，我现在使用的是一个图形按钮，而后面的src属性则指定了我们使用的图像按钮的位置，再后面，是name属性和value属性，我们在写代码的时候，这两个属性随便用一个就好，不必两个都用，因为它们在这里的作用是一样的-----都是指定的图像的替换文字，也就是当图像显示不出来时的替换文字。

使用图形化的按钮就说完了，下面是使用单选按钮，首先，我们来了解一下什么是单选按钮，所谓单选按钮，顾名思义，就是在一组选项中，我们一次只能选择一个，实现方法是将type的属性设置为radio，基本语法是这样的：

name="字符串" value="字符串" checked>

其中，name属性指定单选按钮的名称，若干个名称相同的单选按钮构成一个单选选项组，我们一次在这个组中只能选择一个选项。

Value属性指定提交时的值，就是每个单选选项对应的编号。

还有一个checked属性，这个属性是可选属性，它是用来指定单选框的默认选择的，就是如果使用了这个属性，则这个选框在初始状态时是被默认选中的。

单选也说完了，还有一个复选，这个也不难，使用复选框

下面我们来写一段代码，

例28(23.html)：

百度红客吧原创课程----创建基本表单

width="368">

bgcolor="teal">

colspan="2">

color="white">用户资料

height="50">姓名：

height="50">

size="20">

height="50">性别：

height="50">

name="radio-usersex" value="男"

checked>男   

type="radio" name="radio-1"

value="女">女

height="36">兴趣：

height="36">

name="chk-interest1" value="听音乐">听音乐

type="checkbox" name="chk-interest2" value="看小说">看小说

type="checkbox" name="chk-interest-3" value="上网">上网

height="36">

name="btn-submit" value="提交">

align="center">

name="btn-reset" value="全部重写">

OK,我们来看一下代码的执行效果：

好了，这个表单里用到了单元格的合并，单行文本框，单选框，复选框，提交按钮和重置按钮，可以看到在单选框里，“男”是默认被选中的，这就是我们使用了checked属性的效果。

今天就说到这里吧，关键还是要多多练习，那样才会有效果。