html单选框复选框怎么用

html单选框复选框怎么用,第1张

在使用表单设计调查表时,为了减少用户的 *** 作,使用选择框是一个好主意,html中有两种选择框,即单选和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

语法:

<input type="radio/checkbox" value="值"name="名称" checked="checked"/>

1、type:

当 type="radio" 时,控件为单选框

当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

html单选框怎么设置位置方法是:

1、使用CSS的position属性来控制html单选框的位置。

2、CSS中的position属性有static、relative、absolute和fixed等几种值,结合top、left、right、bottom属性等可以把html元素精确的定位到指定的位置上。

单选框RADIO

单选框能够进行项目的单项选择,以一个圆框选择。

基本语法

<input

type="radio"

name="field_name"

checked

value="'value"

>

语法解释

checked表示此项被默认选中,field_name是单选框的名称,用于服务器端接收参数使用,就像你自己的名字一样,

value表示选中项目后传送到服务器端的值。

文件范例:11-10.htm

在页面中插入单选框。

01

<!--

------------------------------

-->

02

<!--

文件范例:11-10.htm

-->

03

<!--

文件说明:插入单选框

-->

04

<!--

------------------------------

-->

05

<html>

06

<head>

07

<title>插入单选框</title>

08

</head>

09

<body>

10

<h1>用户调查</h1>

11

<Form

action=mailto:tslxg@hotmail.com

method=get

name=invest>

12

姓名:<input

type="text"

name="username"

size=20><br>

13

网址:<input

type="text"

name="url"

size=20

maxlength=50

value="http://"><br>

14

密码:<input

type="password"

name="password"

size=20

maxlength=8><br>

15

确认密码:<input

type="password"

name="password_confirm"

size=20

maxlength=8><br>

16

请上传你的照片:<input

type="File"

name="File"><br>

17

请选择你喜欢的音乐:

18

<input

type="checkbox"

name="m1"

value="rock"

checked>摇滚乐

19

<input

type="checkbox"

name="m2"

value="jazz">爵士乐

20

<input

type="checkbox"

name="m2"

value="pop">流行乐<br>

21

请选择你居住的城市:

22

<input

type="radio"

name="city"

value="beijing"

checked>北京

23

<input

type="radio"

name="city"

value="shanghai">上海

24

<input

type="radio"

name="city"

value="nanjing">南京

25

</Form>

26

</body>

27

</html>

文件说明

第22行到第24行就是插入的单选框。其中每一个单选框的名称是相同的,有其独立的值,"北京"项目是被默认选中的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6222743.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存