<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
<!-- 文本 -->
<input type="text" maxlength="10" value="文本">
</br>
<!-- 密码 -->
<input type="password" value="密码">
</br>
<!-- 单选 -->
<input type="radio" name="gender" value="0">男<input type="radio" name="gender" value="1">女
</br>
<!-- 多选 -->
<input type="checkbox" value="0">电影
<!-- 默认设置 -->
<input type="checkbox" checked value="1">音乐
<input type="checkbox" value="2">美术
</br>
<!-- 按钮 -->
<input type="button" value="按钮">
</br>
<!-- 数字 -->
<input type="number">
</br>
<!-- 日期 -->
<input type="date">
</br>
<!-- 颜色 -->
<input type="color">
</br>
<!-- 范围 -->
<input type="range" min="1" max="10">
</br>
<!-- 邮件 -->
<input type="email">
</br>
<!-- 提交 -->
<input type="submit">
</br>
<!-- url -->
<input type="url">
</br>
<!-- 选择文件 -->
<input type="file">
</br>
<!-- 多个文件 -->
<input type="file" multiple="multiple">
</br>
<!-- 下拉列表 -->
<select>
<option>苹果</option>
<!-- selected 默认设置 -->
<option selected >香蕉</option>
<option>橘子</option>
</select>
</br>
<!-- 对文本域的设置 -->
<!-- 不可拖动设置的文本框大小 -->
<style>
textarea {
resize: none;
}
</style>
<!-- 文本域,可设置行列数 -->
<textarea rows="3" cols="5">
一段文本
</textarea>
</br>
<!-- 另一种按钮 -->
<!-- 四种不同作用 -->
<button type="button">按钮</button>
</br>
<button type="menu">菜单</button>
</br>
<button type="reset">重置</button>
</br>
<button type="submit">提交</button>
</br>
</form>
</body>
</html>
表单各属性的使用:
<form action="http://api.abc.com/user" method="post" name="test" enctype="UTF-8">
</form>