关于第二次学表单input的复习总结

单选框

在设置单选框的时候，点击圆圈就可以进行单选，那如何点击文字也能选择？

    实现代码：

<div>

     <input type="radio" name="bbb" id="man">  //name是设置一个组，方便后端

     <label for="man">男</label>               //使用label就必须设置id

</div>                                       

<div>

     <input type="radio" name="bbb" id="woman" checked="checked">

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

</div>

     实现效果:在点击文字也可以进行单选

//checked属性为默认选择，属性与属性值一样也可以省略写成checked

复选框

复选框如何点击文字实现呢？

    与单选框方法一致，使用label

    类型为type="checkbox"

上传文件

    <input type="file" name="" id="">

图片按钮-代替提交按钮

    <input type="image" src="">

隐藏按钮

    <input type="hidden" name="" id="" value="带给后端的个人信息">

禁用功能

    <button disabled="disabled">注册</button>

    <input type="radio" disabled>

    <input type="text" disabled value="自定义默认内容">

只读功能

    <input type="text" readonly value="自定义默认内容">

下拉菜单

select属性：

    ①size:控制显示几个下拉选项

    ②multiple:选多个

option属性：

    ①value:提供给后端需要用的value值

    ②selected：默认选中

    <div>你的地址</div>

    <select size="3" mutiple>

            <option value="">重庆</option>

            <option selected>上海</option>

            <option>北京</option>

            <option>深圳</option>

    </select>

多行文本输入框-文本域

注意：①建议设置文本域的宽高度用css去定义，不用行列cols、rows

        textarea {

              width: 100px;

              height: 100px;

              resize: none;

        }

        //resize：重新设置大小（随意拉动），vertical,horizontal,both,none

      ②placeholder是提示文字

      ③文本域没有value属性，默认value：写在双标签内部，不可以空格换行，因为空格也会当作内容放在文本域

    <textarea cols="" rows="" placeholder="请输入内容">提前设置好内容       </textarea>

字段集

类似于做一个边框的形式，边框和缺口还可以用css加样式。

     <fieldset>  //设置边框

              <legend>性别</legend>  //设置缺口

     </fieldset>

音频

    <audio src="" controls loop muted></audio>

controls:控制栏

loop:循环播放

autoplay:自动播放

muted:静音

视频

    <video src="" controls loop autoplay muted poster="路径"></video>

width/height也可以直接写在属性里，也可以用css来设置

controls:控制栏

loop:循环播放

autoplay:自动播放

muted:静音

poster:封面图

新增类型总结

type="color"  生成一个颜色选择的表单

type="tel"    唤起拨号盘表单

type="search" 产生一个搜索意义的表单

type="range"  产生一个滑动条表单

type="number" 产生一个数值表单

type="email"  限制用户必须输入邮箱类型

type="url"    限制用户必须输入url类型

type="date"   限制用户必须输入日期

type="month"  限制用户必须输入月类型

type="week"   限制用户必须输入周类型

type="time"   限制用户必须输入事件类型

type="datetime-local"  选取本地时间

新增表单属性总结

autofocus属性：给文本框、选择框或者按钮控件加上该属性，打开页面自动获焦

required属性：必填项，不能为空

multiple:可以输入一个或多个值，每个值之间用逗号分开

   例：<input type="email" multiple/> 还可以应用于file

pattern:将属性值设为某个格式的正则表达式，在提交时会坚持其内容是否符合给定    

        格式

datalist选项列表

这里举例写死内容，实际是后端来设计的内容

     <input type="text" list="mylist"> //关联列表

     <datalist id="mylist">

            <option label="手机" value="网页路径"></option>

            <option label="手表" value="http://www.watch.com" />

            <option label="手抓饼" value="网页路径"></option>

     </datalist>

 

option元素永远都要设置value值

标签可以实现的效果：