前端开发：form中的标签

一、铺垫

我本来想分开，一段一段的写；可是又怕分开后不连贯造成很多问题；

二、标签

2.1input

<form action="">  

        <!-- 都是单行输入  -->

        <!-- //将文本输入框设置成text格式 -->

        姓名<input type="text">  

        <br/>

        <!-- //将文本输入框设置成不可见的密码形式 -->

        密码<input type="password">

        <!-- 单选框 -->

         <br/>

         <!-- 单选框当给定name属性时,就可以单选; -->

        性别<input type="radio" name="sex">男

        <input type="radio" name="sex" checked="checked">女

        <br/>

        爱好<input type="checkbox">吃饭

        <input type="checkbox">睡觉

        <input type="checkbox">打豆豆

        <br/>

        <input type="button" value="这是一个普通按钮">//要想联动必须要使用JavaScript；

    </form>

    <form action="">

        课程<input type="text" name="course">

        <input type="submit" value="登陆">        //把内容提交给服务器

        <input type="reset">        //清空input中的内容

        <input type="file">           //选择要上传的文件

    </form>

 2.2label标签

一半来说label标签是单选框或复选框绑定的，可以通过点击文字；来选择

<label for="male">男</label>

<input type="radio" name="sex" id="male">

<label for="female">女</label>

<input type="radio" name="sex" id="female">

 2.3select标签

下拉菜单

option 中定义 selected="selected" 表示默认选中

<select>

   <option>请选择工作地点</option>

   <option>北京</option>

   <option selected="selected">上海</option>

</select>

2.4textarea标签

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

cols:列数

rows:行数

一个用于填写文本的区域，30列10行；若超过此限制，则会添加滚轮；一般会在CSS中设置属性；

 2.5无语义标签

div 标签；division 的缩写, 含义是分割

span 标签, 含义是跨度

可以理解成就是用来浏览器页面布局；比如位置在上方，中间，下方；

div是分成一行一行的；span是一行中占一部分类似于空格；

div 是独占一行的, 是一个大盒子.

span 不独占一行, 是一个小盒子.

<div>

        <div>

            <span>吃饭</span>

            <span>吃饭</span>

            <span>吃饭</span>

            <span>吃饭</span>

        </div>

        <div>睡觉</div>

        <div>打豆豆</div>

</div>