HTML-表单
2022-05-29 本文已影响0人
测试探索
一、表单介绍
image.png
二、控件的常用属性
image.png
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
<!--在页面上用于文字显示-->
<label>请输入姓名：</label>
<input type = 'text' name = "" id = ""><br>
<label>请输入密码：</label>
<input type = 'password' name = "" id = ""><br>
<label>再次输入密码：</label>
<input type = 'password' name = "" id = ""><br>
<!--对于性别和兴趣爱好，这种单选和复选框，要有value值，供后台使用-->
<label>性别：</label>
<input type = 'radio' name = "xb" id = "" value = "1">男
<input type = 'radio' name = "xb" id = "" value="0">女<br>
<label>兴趣爱好：</label>
<input type = 'checkbox' name = "xb" id = "" value="1">
游泳
<input type = 'checkbox' name = "xb" id = "" value="2">
看书
<input type = 'checkbox' name = "xb" id = "" value="2">
爬山
<input type = 'checkbox' name = "xb" id = "" value="2">
思考<br>
<label>生日：</label>
<select>
<!--selected = "selected"参数表名下拉默认选中-->
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997" selected = "selected">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>年
<select>
<!--selected = "selected"参数表名下拉默认选中-->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>月
<select>
<!--selected = "selected"参数表名下拉默认选中-->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>日<br>
头像：<img src = "image/1.png">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select><br>
<input type="button" value = "普通按钮">
<input type="submit" value = "提交按钮">
</form>
</body>
</html>
image.png
三、表单的其他控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea row = "5" colos = "30" name = "" id ="" >
请输入
</textarea>
<input type="file"><input type = "button" value="上传"><br>
000<input type = "hidden" name = "" id = "">000
<!--滚动条列表框-->
<select size = "3" multiple = "true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</body>
</html>
image.png
