接上个笔记[aru_41](表单标签)
本节课所用演示代码点击运行可查看效果-单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上课</title>
</head>
<body>
<H2>
选择你最喜欢的水果
</H2>
<form method="get" action="">
1.苹果<input type="radio" name="fruit" value="apple">
2.橘子<input type="radio" name="fruit" value="orange">
3.香蕉<input type="radio" name="fruit" value="banana">
<br>
<input type="submit">
</form>
</body>
</html>
其中表单代码部分单独拿出来
<form method="get" action="地址">
1.苹果<input type="radio" name="fruit" value="apple">
2.橘子<input type="radio" name="fruit" value="orange">
3.香蕉<input type="radio" name="fruit" value="banana">
<input type="submit">
1.3表单组件复选框
要让单选变成多选,将radio替换成checkbox
下面假如你要利用表单标签做一个小项目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调查</title>
</head>
<body>
<H2>
您的性别是
</H2>
<form method="get" action="">
男<input type="radio" name="sex" value="male">
女<input type="radio" name="sex" value="female">
<br>
<input type="submit">
</form>
</body>
</html>
提高用户体验,让它提前默认选中一项,在你想要默认选中的那一项代码后面加checked=”checked”的属性,该属性在多选框同样适用。
如:
男<input type="radio" name="sex" value="male" checked=”checked”>
就是当用户未选择时默认选中项
表单组件-<select>下拉菜单
<select>
<option></option>
<option></option>
<option></option>
</select>
<select></select>是下拉菜单组件。中间的option是菜单项,比如常见的选择省份
同样关注两点,数据值,数据名,父子结构直接在上面写便好。
数据值option中间夹的就是值
<select name=”province”>
<option>beijing</option>
<option>shanghai</option>
<option>liaoning</option>
</select>
以上就是表单标签最常用的几个组件。
明天更新css