HTML学习笔记-（表单）选择框概述

来源：互联网发布：自动生成条码软件编辑：程序博客网时间：2024/06/05 06:22

一个表单由3个基本元素组成。第一个是表单标签，包含处理表单数据所用网络程序的URL及数据提交到服务器的方法；第二个是表单域，包含文本框，密码框，隐藏框，复选框等；第三个是表单按钮，包含提交按钮，复位按钮和一般按钮。表单按钮用于将数据传送到服务器上或者取消输入。

本博讲述的选择框是表单中最常用的一种元素在网页中不仅有输入文字的提交，还有许多内容需要做成选项，从而为用户提供多种选择，方便使用。选择框分为单选框和复选框。

单选框

单选框多用于问卷调查等选择项目中，使用type属性进行定义。与输入框相比，单选框增加了value属性的定义。value属性里填写的是定义的一个名称，与name属性一样，用作与以后编写的代码进行绑定，语法形式如下：

<input type="radio" name="名称" id="名称" value="值"/> (radio是固定格式表示单选框)

<body><form><!--开始插入表单--><input type="radio"name="radio"id="radio1"value="选项1"/>选项1<input type="radio"name="radio"id="radio2"value="选项2"/>选项2<input type="radio"name="radio"id="radio3"value="选项3"checked="checked"/>选项3</form><!--结束插入表单--></body>

运行如下：

如果想多个内容进行单选，单选框里的那么属性必须定义相同的值（如上面代码name="radio"）。如果想让单选框一开始就默认选中某个选项，只要在input标签中添加一个checked属性，通常checked的属性值为固定格式，即“checked="checked"”。

复选框

语法形式如下：

<input type="checkbox" name="名称" id="名称" value="值"/> (checkbox是固定格式表示单选框)

<body><form><!--开始插入表单--><input type="checkbox"name="xx1"id="checkbox1"value="选项1"/>选项1<input type="checkbox"name="xx2"id="checkbox2"value="选项1"/>选项2<input type="checkbox"name="xx3"id="checkbox3"value="选项3"/>选项3<input type="checkbox"name="xx4"id="checkbox4"value="选项4"<span style="font-size:14px;"></span><pre name="code" class="html">checked="checked"/>选项4

</form></body>

运行结果如下：

当有多个复选框存在的情况下，name属性，id属性，value属性的命名会由于数据类型的不同而有所不同。

0 0