表单标签的使用
常见的输入类型:文本域(type=text)、单选按钮(type=radio)、多选按钮(复选项 type=checkbox)、下拉菜单(select>option)、多行文本(textarea);
单选项的数据接收
input标记的type =radio,单选按钮。
各个选项均需要指定name及value值。
name值相同,value值不同。
可以使用checked设置默认选项
html结构
<form action="./01-radio.php" method="get">
性别:
<input type="radio" name="sex" value="m" checked >男
<input type="radio" name="sex" value="f" >女
<input type="radio" name="sex" value="w" >弯
<input type="submit" value="登录">
</form>
复选框的数据接收
input的**type =checkbox,**可以同时选择多个选项。
name命名形式必须为:name[],最终数据才能以数组的格式,将各个选项的值同时提交,否则只能提交最后一个勾选的属性值。不同的选项值,以数组元素的形式提交。
html结构
<body>
<!--
action :指定数据提交的地址
method:提交方式
name:必不可少
name="hobby[]" 复选框的name名后面跟[] 可以提交多个数据
-->
<form action="./02-checkbox.php" method="get">
兴趣:
<input type="checkbox" name="hobby[]" value="code" checked > 敲代码
<input type="checkbox" name="hobby[]" value="eat" > 吃饭
<input type="checkbox" name="hobby[]" value="dou" > 打豆豆
<input type="submit" value="登录">
</form>
</body>
下拉列表
接收选项比较多的情况:籍贯、类型。
select >option实现的是单选项,下拉菜单。
name属性必选。value值为必选。
selected 默认选中项
html结构如下:
<form action="./03-select.php" method="get">
城市:
<select name="city">
<option value="1">上海市</option>
<option value="2" selected >北京市</option>
<option value="3">天津市</option>
<option value="4">西红柿</option>
</select>
<input type="submit" value="登录">
</form>
数据回显时的默认选中
当表单提交到当前页面时,希望可以看到之前用户选中的项
<?php
//如果传递了城市数据,则获取
if(isset($_GET['city'])){
$city=$_GET['city'];
echo $city; //4
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./form.css">
<title>Document</title>
</head>
<body>
<!--
action属性如果为空,默认把数据提交到当前页面
//数据提交到当前页面后,返回的新页面要选中之前选择的那一项
-->
<form action="" method="get">
城市:
<!-- 根据上面获取的城市的值,设置默认选中项 -->
<select name="city">
<option value="1" <?php echo isset($city)&&$city==1?"selected":"" ?> >上海市
</option>
<option value="2" <?php echo isset($city)&&$city==2?"selected":"" ?> >北京市
</option>
<option value="3" <?php echo isset($city)&&$city==3?"selected":"" ?> >天津市
</option>
<option value="4" <?php echo isset($city)&&$city==4?"selected":"" ?> >西红柿 </option>
</select>
<input type="submit" value="登录">
</form>
</body>
</html>