HTML 表单

<form> 是 HTML 表单标签，能包含其他表单相关元素。

<form> 表单元素 </form>
注：表单元素不是一定要放在 <form> 里面，也可以单独使用。
标签描述
<input> 输入标签
type="text"
type="password"
type="radio"
type="checkbox"
type="button"
type="submit"
type="reset"
type="hidden"
<select>下拉菜单
<textarea>文本域
<button>按钮

<input> 输入元素

<form>
	<span>姓名 ：</span>
	<input type="text" name="name" value="张三" placeholder="请输入姓名"/>
</form>

<input> 为输入标签。

1.type="text" 输入框 ：

name 为 input 元素的名字。 value 为 input 元素的值。placeholder属性为输入框的提示信息，在没有输入字符时显示。

2.type="password" 密码 ： 
<form>
	<span>密码 ：</span>
	<input type="password" name="pwd" placeholder="请输入密码"/>
</form>

密码字段字符不会明文显示，而是以星号或圆点替代。

3.type="radio" 单选按钮 ： 
<form>
	<p>水果 ：</p>
	<input type="radio" name="Fruits" value="apple"/>苹果<br/>
	<input type="radio" name="Fruits" value="Peach"/>桃子<br/>
	<input type="radio" name="Fruits" value="Banana" checked="checked"/>香蕉<br/>
	<input type="radio" name="Fruits" value="watermelon"/>西瓜
</form>

设置单选按钮时，只要是同一组选项，则 name 值相同，值不同，而且只能选中一个。如果要默认选中，则设置 checked。

4.type="checkbox" 复选框 ： 
<form>
	<p>兴趣 ：</p>
	<input type="checkbox" name="like" value="1"/>唱歌<br>
	<input type="checkbox" name="like" value="2"/>跳舞<br>
	<input type="checkbox" name="like" value="3" checked="checked"/>运动<br>
</form>

name 相同的也可以多选。

5.type="button" 普通按钮 ： 
<input type="button" value="提交" name="btn"/>

普通按钮，定义可点击的按钮，但没有任何行为，常用于用户点击时调用JavaScript方法。

6.type="submit" 提交按钮 ： 
<form action="action.php" method="get">
  <input type="password" name="pwd" placeholder="请输入密码"/>
	<input type="submit" value="提交"/>
</form>

提交按钮通常搭配 <form> 使用。当用户单击提交按钮时，输入内容会被提交到服务器。

7.type="reset" 重置按钮 ： 
<input type="reset" value="重置按钮" name="reset"  />
8.type="hidden" 隐藏按钮 ： 
<input type="hidden" value="信息"/>

隐藏按钮 通常用来放一些信息。

HTML - <select> 元素（下拉列表）

<select name="fruits">
	<option value="apple">苹果</option>
	<option value="Banana" selected>香蕉</option>
	<option value="Peach">桃子</option>
	<option value="watermelon">西瓜</option>
</select>

selected 设置默认选中。

HTML - <textarea> 文本域

css 样式

<style type="text/css">
    textarea{
        resize: none;
        width: 500px;
    }
</style>

<textarea name="msg" rows="3" placeholder="意见反馈">我是</textarea>

rows="3" 表示3行。resize: none; 设置在浏览器显示时，用户不能改变元素尺寸大小。除了 value 可以设置 <textarea> 的值，还有就是一种就是直接写在 <textarea> 里面的文本，如 "我是"。

HTML - <button> 按钮

<button type="button" onclick="alert('你好!')">按钮</button>

定义可点击的按钮。onclick 定义事件。alert 浏览器弹出框。点击按钮，浏览器会弹出 "你好!"。