form表单的常用标签以及简单应用

**

form的标签属性：

**

action="/login" : 表示设置表单提交数据时，后台接收的url（接口）
method=“get”： 提交表单数据的方式（请求后台接口的方法）；get,post.
下来详细区别GET,POST。

    <from action=""  method="get">获取数据地址栏可见
    <from action=""  method="post">提交数据隐藏 可提交大量数据 

表单要上传文件，则必须是POST请求。enctype=“multipart/form-data”
name=“myform”： 表单的名称

input标签的标签属性：
type: 指定一个值，表示是什么类型的表单元素。
text: 单行文本输入框
value：是控制传入服务器的值
password: 密码输入框
placeholder:提示语

<input  autofocus placeholder="请输入用户名" id="usename" type="text">

submit: 提交按钮

value:有默认值的时候使用
maxlength=“10”：最多限制长度（中英文同数），与大小容量没有关系，只是限制能输入多少个东西，不限制究竟是什么东西。
reset: 重置按钮
radio单选框，设置绑定，这里的value是设置给服务器的值。这里的name的意义在将选的值与提交的东西串起来。

<label for="m">m</label><input name="sex" value="f" id="m" type="radio">
<label for="f">f</label><input name="sex" id="f" type="radio">

name:

autofocus：自动获取焦点（自动获取光标）

<label for="usename">用户名</label>
<input  autofocus id="usename" type="text">

可以用布尔值可以直接写属性名。
checkbox: 多选
file: 文件上传
-------------------html5新增的类型-----------------
color: 颜色
datatime: 日期时间
week: 周
month： 月

name: 表单域的名称
placeholder: 提示信息
value: 默认值，或提交到后台的值，如果是submit,reset的类型时，value就是按钮的名称。

button标签：

type="button, reset,submit" 
<button type="button">注册</button>   --> AJAX来实现后台请求

单选框： radio
每一个标签的name属性的值，必须是相同。
使用把和文本一起包括起来。
checked=“checked”：设置单选框默认选中项。

多选框： checkbox
name: 可以是同一个名字，也可以不同。一般 同名。
value: 提交到后台的值；
checked: 设置为默认选中。
配合,提升用户体验。
文件上传：
file: 文件上传

列表与下拉列表：

<!--下拉列表-->
<label for="dizhi"></label>
<select name="dizhi" id="dizhi"><!--下拉列表-->
    <option value="11">高新</option><!--option是下拉列表项-->
    <option  selected  value="12">武侯</option>
    <option value="13">锦江</option>
</select>

这里的value提交使用数字，这个数字是这个地区对应的id.(一定不能写中文)
selected 默认被选中

value: 提交到后台的值；

之间的文本，就是给用户看的。下拉项的文本 selected="selected"： 设置为默认选中。

当是列表时：
size=“4”： 表示同时显示的option的数量；
multiple=“multiple”： 允许用户按ctrl 不放，进行多项选择。

多行文本输入框（多行文本域）
rows: 行数，控制高度
cols: 列数，控制宽度
name=“info”
id=“info” css选择器

lable标签
关联标签

form

action=""这里是服务器地址 method=""是提交的方式

type属性控制显示出来的是何种类型

<label for="usename">用户名</label>
<input id="usename" type="text">
<label for="password">密码</label>
<input id="password" type="password">

文本域
1.父文本编辑器：可以发文字也可以发图片，这一段里面还可以改某些字体样式。
2.文本编辑器

<textarea name="" id="" cols="30" rows="10"></textarea>

按钮
button这个便签 在from表单标签里面有默认提交的功能，但是在from标签外面就是一个单纯的按钮。
可以通过控制type来控制这个button的功能。

 <!--按钮-->
    <button>提交</button>
    <input value="您好我是按钮" type="submit">
    <input  value="单纯的按钮" type="button">

简单应用

 <!--用户名-->
    <label for="user">用户名</label>
    <input placeholder="请输入用户名" maxlength="10" id="user" type="text">

 <!--密码框-->
    <label for="password">密码</label>
    <input placeholder="请输入密码" id="password" type="password">

 <!--单选框-->
    <h3>性别</h3>
    <label for="f">女</label><input name="sex" id="f" type="radio">
    <label for="m">男</label><input name="sex" id="m" type="radio">

<!--多选框-->
    <h3>爱好</h3>
    游泳<input value="1" type="checkbox">
    摄影<input value="2" type="checkbox">
    旅游<input value="3" type="checkbox">

<!--文本区-->
    <h3>详情</h3>
    <textarea name="" id="" cols="30" rows="10"></textarea>

<!--下拉列表-->
    <h3>下拉列表</h3>
    <label for="shuiguo">想吃的水果
    <select name="shuiguo" id="shuiguo">
        <option value="11">苹果</option>
        <option value="12">香蕉</option>
        <option value="13">葡萄</option>
    </select>
    </label>

 <!--提交按钮-->
    <h3>在此提交</h3>
    <button>提交</button>