前端知识之HTML----form----内部元素

1.多行文本（TextArea）

用于在表单中提供多行的文本输入控件
格式：

<textarea cols="30" rows = "10">多行文本</textarea>

要点：
1.cols属性表示columns,即列，规定文本区内的可见宽度
2.rows属性表示rows，即行，规定文本的可见行数
3.默认可以拖放，使用CSS可禁止拖放
textarea{resize:none;}

2.明文输入框

账号：<input type="text"/>
账号：<input type="text" value="root"/>
//区别在于是否有默认值

3.暗文输入框

密码:<input type="password"/>
密码:<input type="password" value="123456"/>
//同样，value表示是否有默认值

4.单选框

从多个选项中选出其中一个

        <input type="radio" name="danxuan" checked="checked"/>男
        <input type="radio" name="danxian"/>女
        //checked表示默认选项

5.多选框

：

        <input type="checkbox" name="duoxuan" checked="checked"/>苹果
        <input type="checkbox" name="duoxuan" checked="checked"/>梨子
        <input type="checkbox" name="duoxuan" />香蕉
        //checked表示默认选项，这里可以有多个默认选项

6.下拉列表

        <select>
                <optgroup label="湖北">
                <option selected="selected">武汉</option>
                <option>十堰</option>
                <option>汉川</option>
                </optgroup>
                <optgroup label="湖南">
                <option>长沙</option>
                <option>常德</option>
                </optgroup>
        </select>
        //optgroup是分组
        //selected是默认选择

7.标签

     <label for="myinput">danxuan</label>
     <input type="text" id="myinput"/><br><br>
     //就是个标签，不会有太多效果
     //但是记住得绑定,for和id

8.普通按钮

input type="button" value="普通按钮"/>
//常常配合js函数使用

9.图片按钮

<`input type="image" src=""/>
//一个小图片，但是可以点击，是一个按钮

10 重置按钮

<input type="reset"/>
//重置所有数据
//只重置表单中的表单项
//不用设置value都有重置在上面显示

11.提交按钮

<input type="submit" value="提交按钮"/>
//把表单项提交给action（form中设置）指定的地方
//提交的表单项必须要有name
//默认有提交两字

12.文件上传

<input type="file"/>
//可以打开计算机读取文件的小窗口

13.隐藏域

<input type="hidden" name="test" value="12">
//隐藏的输入字段

14.其他

剩下的有些是不常用，有些是不兼容，所以，只是简单的列出来

    取色器：<input type="color"><br><br>
    日期：<input type="date"><br><br>
    email:<input type="email"/><br><br>
    url:<input type="url"/><br><br> 
    电话<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"> 
    数字输入：<input type="number" min="0" max="10" step="0.5" value="6" />
    搜索框<input type="search">
        //type="date"的input输入类型用于选取日、月、年
        <input type="date">
        //type="month"的input输入类型用于选取月、年
        <input type="month">
        //type="week"的input输入类型用于选取周、年  
        <input type="week">
        //type="time"的input输入类型用于选取时、分
        <input type="time">
        //type="datetime"的input输入类型用于选取时、日、月、年(UTC时间)
        <input type="datetime">
        //type="datetime-local"的input输入类型用于选取时、日、月、年(本地时间)
        <input type="datetime-local">