表单元素详解

form标签创建表单 块元素

参数：

1. action:表单提交服务器地址
    如果不设置，提交是没有反应
2. method:表单提交方式（方法）
    post 获取信息
    get  发送信息（默认值）
3. target 提交页面打开在何处打开
    _self  当前页面打开
    _blank 新页面打开
    _new   新打开一个页面，如果是新的就不会在打开一个页面

input

form实现方式通过input标签

特点：单标签 行内块元素

默认属性：

padding
outline 轮廓线 跟border一样但不会影响页面布局

值：

value 显示在框中的默认值
placeholder 输入前提示框显示的内容
name 定义信息的值
autofocus 自动聚焦
readonly 将表单设置为只读 数据会提交
disabled 将表单设置为禁用 数据不会提交
autocomplete 自动补全（on off）

<input type="text"  placeholder="请输入用户名" name="username" autofocus autocomplete="off">

提交按钮

<input type="submit" value="登陆">
<input type="button" value="提交">
实现效果需要JS

密码输入

<input type="password" name="pwd">

数字输入

<input type="number" value="100" min="2" max="200" step="5">
value 默认值
min 最小值
max 最大值
step 步长

搜索框

<input type="search">

输入滑块

<input type="range"><br>

文件导入

<input type="file"><br> 单文件导入
<input type="file" multiple><br> 多文件导入

选框

单选--radio

男<input type="radio" name="six" value="boy"> 
女<input type="radio" name="six" value="girl">
name 名
value 值
单选框 ，相同name就只能选择一个,必须指定个value值才能提交

多选--checkbox

西施<input type="checkbox" name="female" value="xi">
九尾<input type="checkbox" name="female" value="jiu">
纲手<input type="checkbox" name="female" value="gang">
鸣人<input type="checkbox" name="female" value="ming">

label 标签

隐式的使用label

<label>兜子<input type="radio" name="six"></label>
<label>杏子<input type="radio" name="six"></label>

显示的使用label 
    将label的for属性设置为跟表单控件id值一样
<input type="checkbox" name="female" id="jiuwei">
<label for="jiuwei">九尾</label>
<input type="checkbox" name="female" id="gangshou">
<label for="gangshou">纲手</label>
<input type="checkbox" name="female" id="mingren">
<label for="mingren">鸣人</label>

select 下拉选择

option列表 跟ul>li同理

name 提交服务器信息名
value 提交的信息值
selected 默认选中
optgroup value 分组的标题名称

代码

<select name="" id="">
       <optgroup label="尾兽""></optgroup>
       <option value="jiu">九尾</option>
       <optgroup label="火影"></optgroup>
       <option value="gangshou">纲手</option>
       <optgroup label="主角"></optgroup>
       <option value="mingren">鸣人</option>
       <option value="mingren">佐助</option>
       <option value=""></option>
</select>

文本输入区域
rows 表示高
cols 表示宽

<textarea name="" id="" cols="30" rows="10"></textarea>
resize:none 设置选框不能拉伸

表单分组--fieldset
legend 分组标题

<fieldset>
        <legend>下拉框</legend>
        <select name="" id="">
            <optgroup label="尾兽""></optgroup>
            <option value="jiu">九尾</option>
            <optgroup label="火影"></optgroup>
            <option value="gangshou">纲手</option>
            <optgroup label="主角"></optgroup>
            <option value="mingren">鸣人</option>
            <option value="mingren">佐助</option>
        </select>
 </fieldset>

重置按钮

<input type="reset">

星期输入框-年 周

<input type="week">

日期输入框-年月 日

<input type="date">

年月输入框-年月

<input type="month">

时间输入框-小时分钟

<input type="time">

时间戳年月日小时分钟

<input type="datetime-local">

调色版

<input type="color">