<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<!--
表单就是从浏览器向服务器传输数据的手段
表单具备两个要素：
-Form 表单元素
-表单控件
表单主要用于显示、收集和提交信息到服务器
-->
<form action="" method="post">
<!--
-action ：表单提交的URL
-method ：表单数据的提交方式
-entype ： 表单数据进行编码的方式
-->
<!--
表单控件：
文本框、密码框
单选框、复选框
按钮
隐藏域、文件选择框
--其他：
标签、文本域、下拉选框等等
-->
<h1>表单</h1>
<!-- input 元素作 文本框和密码框 -->
<!-- 常用属性：
value 属性：对应输入框或者密码框的文本内容
maxlength: 限制输入的字符数
readonly:设置文本只读
-->
<p>
<label for="name"> 用户名:</label>
<input type="text" id="name" name="user" value="<请输入你的用户名>"/>
</p>
<!-- label 标签元素，用于给控件设置名称
for :设置该文本所关联的控件ID，关联后点击标签等于点击控件
-->
<p>
<label for ="pass">密码：</label>
<input type="password" id="pass"name="pass" maxlength="8">
</p>
<!-- input 元素作 单选框和复选框 -->
<p>
性别：
<label for="m">男：</label>
<input type="radio" name="sex" id="m" value="m">
<label for="f">女：</label>
<input type="radio" name="sex" id="f" checked="checked" value="f">
<!-- 常用属性：
name 属性：用于实现分组，一组单选框或者复选框的名称必须相同。
cheched 属性:设置选中的
value 属性：文本，当页面提交表单时，会把对应的value值发送到服务器
-->
</p>
<p>
爱好：<br>
<input type="checkbox" name="hobby" value="1">打篮球
<input type="checkbox" name="hobby"value="2">踢足球<br>
<input type="checkbox"name="hobby"value="3">打乒乓球
<input type="checkbox"name="hobby"value="4">滑雪<br>
<input type="checkbox"name="hobby"value="5">爬山
<input type="checkbox"name="hobby"value="6">拳击<br>
</p>
<!--input 元素作 按钮
提交按钮： submit
--传送表单数据给服务端或者其他程序处理
重置按钮 ： reset
--清空表单的内容并把所有表单控件还原成默认状态和默认值
普通安丘 ： button
--用于执行客户端脚本
属性 ： value：按钮的名字
-->
<p>
<input type="submit" value="保存">
<input type="reset" value="重置">
<input type="button" value="取消">
</p>
<!-- 隐藏域 和文件选框
隐藏域 hidden --在表单中包含不希望用户看见的信息
文件选框 file --上传文件到服务器
-->
<input type="hidden" name="用户性格" value ="sb">
<input type="file"><br>
<!--
文本域
相当于多行文本框
<textarea>元素
主要属性：
cols :指定文区域的列数
rows: 指定文本区域的行数.
readonly: 只读
-->
<p>
文本区域：<br>
<textarea rows="10" cols="10">
广州市天河区天河路大厦西厅2407号
</textarea>
</p>
<!-- 下拉选单 -->
<p>课程：<br>
<select name="course">
<option value="1">java</option>
<option value="2">PHP</option>
<option value="3">.NET</option>
</select>
</p>
</form>
</body>
</html>
