1.单行文本输入框
<html>
<head>
<title> 单行文本输入框 </title>
</head>
<body>
<form action="###" method="get">
输入你的姓名:
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630370_4194.jpg)
2.密码输入框
<html>
<head>
<title> 密码输入框 </title>
</head>
<body>
<form action="###" method="post">
输入你的姓名:
<input type="text" name="yourname"><br>
输入你的密码:
<input type="password" name="yourpw"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630444_1363.jpg)
3.复选框(checkbox)
<html>
<head>
<title> 复选框 </title>
</head>
<body>
<form action="###" method="post"> 选择你喜欢的水果: <br>
<input type="checkbox" name="fruit" value="apple"> 苹果 <br>
<input type="checkbox" name="fruit" value="banana"> 香蕉 <br>
<input type="checkbox" name="fruit" value="orange"> 橘子 <br>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630503_6557.jpg)
4.复选框-缺省已选
<html>
<head>
<title> 复选框-缺省已选 </title>
</head>
<body>
<form action="###" method="post"> 选择你喜欢的水果: <br>
<input type="checkbox" name="fruit" value="apple" checked> 苹果 <br>
<input type="checkbox" name="fruit" value="banana"> 香蕉 <br>
<input type="checkbox" name="fruit" value="orange"> 橘子 <br>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630688_1563.jpg)
5.单选框
<html>
<head>
<title> 单选框 </title>
</head>
<body>
<form action="###" method="post"> 选择你喜欢的水果: <br>
<input type="radio" name="fruit" value="apple" > 苹果 <br>
<input type="radio" name="fruit" value="banana"> 香蕉 <br>
<input type="radio" name="fruit" value="orange"> 橘子 <br>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630746_1751.jpg)
6.单选框-缺省已选
<html>
<head>
<title> 单选框-缺省已选 </title>
</head>
<body>
<form action="###" method="post"> 选择你喜欢的水果: <br>
<input type="radio" name="fruit" value="apple" checked> 苹果 <br>
<input type="radio" name="fruit" value="banana"> 香蕉 <br>
<input type="radio" name="fruit" value="orange"> 橘子 <br>
<input type="submit" value="提交">
</form>
</body>
</html>
7.下拉框(select)单选
<html>
<head>
<title> 下拉框-单选 </title>
</head>
<body>
<form action="###" method="post"> 选择你喜欢的水果: <br>
<select name="fruit">
<option value="apple">苹果
<option value="banana">香蕉
<option value="orange">橘子
</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630823_1037.jpg)
8.下拉框-多选
<html>
<head>
<title> 下拉框-多选 </title>
</head>
<body>
<form action="###" method="post"> 选择你喜欢的水果: <br>
<select name="fruit" multiple>
<option value="apple">苹果
<option value="banana">香蕉
<option value="orange">橘子
</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630879_2414.jpg)
9.多行输入框(textarea)
<html>
<head>
<title> 多行输入框 </title>
</head>
<body>
<form action="###" method="get"> 简单介绍自己: <br>
<textarea rows="3" cols="50">
</textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630919_1335.jpg)
10.图片提交
<html>
<head>
<title> 图片提交</title>
</head>
<body>
<form action="###" method="get"> 按钮图片: <br>
<input type="image" src="http://www.blabla.cn/images/icons/go.gif" alt="提交" name="imagesubmit">
</form>
</body>
</html>
![](https://img-my.csdn.net/uploads/201212/16/1355630961_5692.jpg)