HTML-表单项2
1、表单项：不同类型的input元素、下拉列表、文本域等。
<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- value：表单项提交的值 -->
<form action="" method="post">
<!-- input表单项，通过type属性控制输入形式 -->
姓名：<input type="text" name="name"><br><br>
密码：<input type="password" name="password"><br><br>
<!-- label：定义单选按钮，但要保证两个name=的值是一样的，如果一个gender1一个gender2还是可以复选的 -->
<!-- 加了label标签以后，点击标签里的任何一个区域，都可以聚焦到当前元素，例如点男就选中了男前面的孔，如果不加label标签，只有点孔的时候才会选中，点后面的男不会被选中； -->
性别：<label><input type="radio" name="gender" value="1"> 男 </label>
<label><input type="radio" name="gender" value="0"> 女 </label><br><br>
<!-- checkbook定义复选框 -->
爱好：<label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label><br><br>
<!-- file定义文件上传按钮 -->
图像：<input type="file" name="image"><br><br>
<!-- date/time/datetime-local -->
生日：<input type="date" name="birthday"><br><br>
时间：<input type="time" name="time"><br><br>
日期时间：<input type="datetime-local" name="datetime"><br><br>
邮箱：<input type="email" name="email"><br><br>
年龄：<input type="number" name="age"><br><br>
<!-- <select></select>定义下拉列表，<option>定义列表项 -->
学历：<select name="degree">
<option value="">-----------请选择-----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
<!-- hidden定义隐藏域，textarea文本域 -->
描述：<textarea name="description" cols="30" rows="10"></textarea>
<input type="hidden" name="id" value="1"><br><br>
<!-- 表单常见按钮：submit/reset/button 定义提交按钮/重置按钮/可点击按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>
浙公网安备 33010602011771号