1.Form 表单
表单是一个包含表单元素的区域，主要作用就是向服务器提交数据。
2.文本表单
文本表单简单的包括有文本框、密码框和文本域；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form action=""><table><!-- 建立两行两列的表格，方便对齐 --> <tr> <td>用户名: </td> <td><input type="text" id="userName" name="userName"/> </td> </tr> <tr> <td>密码:</td> <td><input type="password" id="passWord" name="passWord"/></td> </tr> <tr> <td colspan="2" ><textarea id="textarea" name="textarea" rows="10" cols="30"></textarea></td> </tr></table></form></body></html>
复制代码
运行结果：
自己可以填写相应的信息！
3.单选框
单选框是 radio；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form action="">性别:<input type="radio" name="sex">男<!-- checked属性是默认选中 --><input type="radio" name="sex" checked="checked">女</form></body></html>
复制代码
运行结果：
默认选中女；
4.复选框
复选框是 checkbox；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form action="">性别:<input type="radio" name="sex"/>男<!-- checked属性是默认选中 --><input type="radio" name="sex" checked="checked">女<br/>兴趣:<input type="checkbox" name="hobby"/>唱歌<input type="checkbox" name="hobby"/>跳舞<input type="checkbox" name="hobby" checked="checked"/>下棋</form></body></html>
复制代码
运行结果：
可以多选！
5.下拉框
下拉框用 select；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form action="">性别:<input type="radio" name="sex"/>男<!-- checked属性是默认选中 --><input type="radio" name="sex" checked="checked">女<br/>兴趣:<input type="checkbox" name="hobby"/>唱歌<input type="checkbox" name="hobby"/>跳舞<input type="checkbox" name="hobby" checked="checked"/>下棋<br/>年级:<select id="grade" name="grade"> <option value="1">大一</option> <option value="2">大二</option> <option value="3">大三</option></select></form></body></html>
复制代码
运行结果：
6.按钮
按钮分为提交按钮 submit 和普通按钮 button；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form action=""><table><!-- 建立两行两列的表格，方便对齐 --> <tr> <td>用户名: </td> <td><input type="text" id="userName" name="userName"/> </td> </tr> <tr> <td>密码:</td> <td><input type="password" id="passWord" name="passWord"/></td> </tr> <tr> <!-- 这种登录是提交数据到后台 --> <td><input type="submit" value="登录"></td> <!-- 普通按钮 --> <td><input type="button" value="提交"></td> </tr></table></form></body></html>
复制代码
运行结果：
7.文件上传
文件上传用 file；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><input type="file" id="f" name="f"/></body></html>
复制代码
运行结果：
点击选择文件就可以打开本地文件了；
注：这里不同的浏览器解析的结果是不同的！
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论