一、表单标签<from>
表单标签是最常用的标签，用于与服务器端的交互
1、表单组件input
<input>：输入标签：接受用户输入信息。
其中的type属性指定输入标签的类型。
|-- 文本框text 输入的文本信息直接显示在矿中
|-- 密码框password 输入的文本以远点或者星号的形式显示
|-- 单选框radio 如：性别选择
|-- 复选框checkbox 如：兴趣选择
|-- 隐藏字段 hidden 在页面上不显示，单在提交的时候随其他内容一起提交
|-- 提交按钮 submit用于提交表单中的内容
|-- 选择文件 file
|-- 图片 image
|-- 按钮 button -->可以设置弹窗alert
2、表单组件select&textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--像服务端提交，表单中的组件必须有name和value属性
用于给服务端获取数据方便
-->
<form>
输入名称：<input type="text" name="user" value=""/><br/>
输入密码：<input type="password" name="passwd"/><br/>
性别：<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv" checked="checked"/>女<br/> <!--默认选中女 -->
兴趣爱好：<input type="checkbox"/>游泳
<input type="checkbox"/>画画
<input type="checkbox"/>跳舞<br/>
选择文件：<input type="file" name="file"/><br/>
一个图片：<input type="image" src="11.jpg" width="20" height="20" /><br/>
<!--数据不需要客户端知道，但是可以将其提交服务端-->
隐藏组件：<input type="hidden" name="myke" value="myvalue"/><br/>
<!--alert弹窗 -->
一个按钮：<input type="button" value="有个按钮" onclick="alert(‘有个阿牛‘)"/><br/>
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="zh" selected="selected">中国</option>
<option value="en">英国</option>
</select>
<textarea name="text"></textarea>
<br/>
<input type="reset" value="清除数据"/> <input type="submit" value="提交数据"/><br/>
</form>
</body>
</html>
页面展示
二、表单格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单格式化</title>
</head>
<body>
<form>
<table border="1" bgcolor="#8fbc8f" cellpadding="10" cellspacing="0" width="600">
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称：</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td>输入密码：</td>
<td><input type="password" name="psw"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repsw"/></td>
</tr>
<tr>
<td>选择性别：</td>
<td>
<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv" checked="checked"/>女
</td>
</tr>
<tr>
<td>选择技术：</td>
<td>
<input type="checkbox" name="tech" value="JAVA"/>JAVA
<input type="checkbox" name="tech" value="HTML"/>HTML
<input type="checkbox" name="tech" value="CSS"/>CSS
</td>
</tr>
<tr>
<td>选择国家：</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="zh" selected="selected">中国</option>
<option value="en">英国</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/>
</th>
</tr>
</table>
</form>
</body>
</html>
页面效果
原文：https://www.cnblogs.com/frankruby/p/13712623.html