HTML 表单的基础用法

前言：

form表单是一个网页很重要的组成部分，它具有可供用户填写、选择、上传信息并把这些信息集中起来交由代后台服务器处理的作用。

一，<form> 标签

<form action="##" method="post">
        <label for="uname">名字:</label>
        <input type="text" name="uname" id="uname" >
</form>

<form> 标签于用于创建HTML 表单，如代码上一样始终包含文本字段、复选框、单选框、提交按钮等等，以便把所填写的信息递交给后台服务器。

主要属性	主要的值	功能
action	* url*	规定当提交表单时向何处发送表单数据。
method	post，get	规定以何种方式向action的值发送请求.
name	form_name	规定表单的名字。

二，<label>标签

<form action="#" method="post">
        <label for="uname">名字:</label>
        <input type="text" name="uname" id="uname" >
</form>

<label> 标签为 input 元素定义标注（标记），为它设置for属性，当鼠标点击它的时候，相应的input元素表单控件自动获取焦点。

主要属性	主要的值	功能
for	id	规定 label 绑定到哪个表单元素。
form	formid	规定 formid绑定到哪个表单元素。

三，<input>标签

 <form action="##" method="post">
      <div>
        <label for="uname">名字:</label>
        <input type="text" name="uname" id="uname" placeholder="请输入您的名字">
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="请输入您的密码">
      </div>
      <div>
        <label>性别:</label>
        <input type="radio" name="sex" value="男" >男
        <input type="radio" name="sex" value="女" >女
      </div>
      <div>
        <label>取向：</label>
        <input type="radio" name="uso" value="男" >男
        <input type="radio" name="uso" value="女" >女
        <input type="radio" name="uso" value="男&女" >男&女
      <div>
        <label>爱好：</label>
        <input type="checkbox" name="hobby" value="hy1" >吃饭
        <input type="checkbox" name="hobby" value="hy2" >睡觉
        <input type="checkbox" name="hobby" value="hy3" >打豆豆
      </div>
       <div>
        <label for="uword">请上传您的文章:</label>
        <input type="file" name="word">
      </div>
    </form>

效果如下图：

主要属性	主要的值	功能
type	button，checkbox，file，hidden，image，password，radio，reset，submit，text	规定 input的形态如文本域，密码域等
placeholder	text	可描述输入字段预期值的提示信息
value	value	规定 input 元素的值
name	name	元素的名称
checked	checked	规定此 input 元素首次加载时应当被选中

<input>标签是form表单最重要的标签，它的type属性可以让它变成各种形态。

主要属性	主要的值	功能
type	button，checkbox，file，hidden，image，password，radio，reset，submit，text	规定 input的形态如文本域，密码域等
placeholder	text	可描述输入字段预期值的提示信息
value	value	规定 input 元素的值
name	name	元素的名称
checked	checked	规定此 input 元素首次加载时应当被选中

四，<select>标签，<option>标签

<form action="##" method="post">
   <select name="car">
          <option value="宝马">宝马</option>
          <option value="奔驰" selected="selected">奔驰</option>
          <option value="法拉利">法拉利</option>
    </select>
</form>

效果如下图：

用<select>标签创建下拉列表，<option>标签创建的选择项。

1.<select>标签：

主要属性	主要的值	功能
name	name	规定下拉列表的名称。
size	number	规定下拉列表的可以见数量
multiple	multiple	规定可选择多个选项。

2.<option>标签：

主要属性	主要的值	功能
value	text	定义送往服务器的选项值
selected	selected	默认被选中的值

五， <textarea> 标签

 <form action="##" method="post">
        <label>评论：</label>
        <textarea placeholder="请输入您评论"></textarea>
 </form>

效果如下图：

主要属性	主要的值	功能
name	name_of_textarea	规定文本区的名称
readonly	readonly	规定文本区为只读
maxlength	number	规定文本区域的最大长度（以字符计）
placeholder	text	规定描述文本区域预期值的简短提示

用<textarea>标签创建多行输入框，标签对中的字符会默认出现。

主要属性	主要的值	功能
name	name_of_textarea	规定文本区的名称
readonly	readonly	规定文本区为只读
maxlength	number	规定文本区域的最大长度（以字符计）
placeholder	text	规定描述文本区域预期值的简短提示

六，按钮

<form action="##" method="get">
      <div>
        <label for="uname">名字:</label>
        <input type="text" name="uname" id="uname" >
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" >
      </div>
      <button>提交</button>
      <input type="submit" value="提交">
      <input type="reset"  value="清空">
  </form>

效果如下图：

<button>和 <input type="submit">都可创建提交按钮，按下即可提交同在一form表单内的数据， <input type="reset">可创建清空按钮，按下即可清空同在一form表单内的数据（预设的value值无法清空）