HTML基础之表单
这是一个基础的网页表单。
以下代码用visual studio code实现。
<!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>
<form action="/user/add" method="POST">
用户名:<input type="text"name="userName"id="userName"required placeholder="请输入用户名"><br>
密码:<input type="password"name="password"id="password"><br> 姓名:<input type="text"name="Name"id="Name"value="Lora"><br>
出生日期:<input type="date"name="birthday"id="birthday"><br>
性别: <input type="radio" name="sex" id="sex1" value="f">女 <input type="radio" name="sex" id="sex2" value="m">男<br>
爱好球类:
<input type="checkbox" name="hobby" id="f1">篮球
<input type="checkbox" name="hobby" id="f2">羽毛球
<input type="checkbox" name="hobby" id="f3">排球
<input type="checkbox" name="hobby" id="f4">乒乓球
<input type="checkbox" name="hobby" id="f5">足球<br>
EMail: <input type="email" name="email" id="email"><br>
籍贯:<select name="select"id="select">
<option value="1">广东</option>
<option value="2">湖北</option>
<option value="3">湖南</option>
<option value="4">江苏</option>
<option value="5">四川</option>
<option value="6">北京</option>
</select><br>
备注：<br>
<textarea name="memo"id="memo"cols="30"rows="10">
</textarea><br>
<input type="submit" value="添加用户">
<input type="reset" value="重置">
</form>
</body>
</html>
进阶版：用表格布局的表单
效果图：
代码如下：
<!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>
<form name="form1" method="post" action="a.asp">
<table width="30%" border="0" cellspacing="0" cellpadding="0">
<tr> <td align="center">用户名：</td>
<td height="28"><input name="user" type="text" maxlength="10" size="20"required /></td> </tr>
<tr> <td height="28" align="center">密 码 ： </td> <td><input name="pwd" type="password" value="" maxlength="20"size="20"required /></td> </tr> <tr> <td height="28" align="center">姓名 ： </td>
<td><input type="text"name="Name"id="Name"value="Lora"maxlength="10" size="20"required></td></tr>
<tr> <td height="28" align="center">出生日期： </td>
<td><input name="birthday" type="date" value="" size="20" required/></td> </tr>
<tr> <td height="28" align="center">性别： </td>
<td><input type="radio"name="sex"id="sex1"value="f">女
<input type="radio"name="sex"id="sex2"value="m">男</td></tr>
<tr> <td height="28" align="center">爱好球类： </td>
<td><input type="checkbox" name="hobby" id="f1">篮球
<input type="checkbox" name="hobby" id="f2">羽毛球
<input type="checkbox" name="hobby" id="f3">排球
<input type="checkbox" name="hobby" id="f4">乒乓球
<input type="checkbox" name="hobby" id="f5">足球</td> </tr>
<tr> <td height="28" align="center">EMail： </td>
<td><input type="email" name="email" id="email"size="20"></td></tr>
<tr> <td height="28" align="center">籍贯： </td>
<td><select name="select"id="select">
<option value="1">广东</option>
<option value="2">湖北</option>
<option value="3">湖南</option>
<option value="4">江苏</option>
<option value="5">四川</option>
<option value="6">北京</option>
</select></td></tr>
<tr> <td height="28" align="center">备注： </td>
<td><textarea name="memo"id="memo"cols="30"rows="10">
</textarea><br></td></tr>
<tr> <td height="32">
<input type="submit" name="Submit" value="提交" /></td>
<td>
<input type="reset" name="Submit2" value="重置" /></td> </tr>
</table>
</form>
</body>
</html>