黄阿信的个人博客

表单

HTML5中，表单是HTML获得用户输入的手段。

输入类型表单

<form>
        <input type="text" value="请输入噢"><!-- text是单行文本框value是占位符 -->
        <br>
        <input type="text" placeholder="请输入噢"><!--placeholder是提示内容-->
        <br>
        <input type="text" placeholder="请输入噢" maxlength="10"><!--maxlength指明输入最大长度-->
        <br>
        <input type="text" placeholder="请输入噢" size="50"><!--size指明输入框的长度-->
        <br>
        <input type="text" value="请输入噢" readonly><!--readonly指明只读，不可编辑-->
        <br>
        <input type="password" placeholder="请输入密码噢">
        <br>
        <br>
        <textarea rows="10" cols="10"> <!-- 指定行数列数 -->
            这是内容
            gh
            h
            j
        </textarea>
    </form>

按钮类型表单

 <form><!-- value是提交表单时上传到服务器的内容 -->
       <input type="button" value="type='button'按钮">
       <button>按钮</button>
       <input type="submit" value="type='submit'按钮">
       <input type="checkbox"><!-- 复选框 -->
        这是一个复选框
     <input type="radio" name="choose">单选1<!-- 三选一按钮集合 -->
       <input type="radio" name="choose" checked>单选2 <!-- 默认选中 -->
       <input type="radio" name="choose">单选3
 </form>

以上三种形式都可以实现按钮的功能，但是三者有着本质的区别，button比type="button"的功能多，button可以当任何按钮来使用，适用范围更广泛。
type="submit"用于提交表单，使用范围比type="button"小一些
type="button"一般用于配合js（JavaScript）使用
type="submit"用于提交表单的时候，必须声明form里面的method属性，最好加上action属性

其他类型表单

<form enctype="multipart/form-data">
    <input type="range" min="-100" max="100" value="50"><!-- 可滑动 -->
    <br>
    请选一个来进行选择
    <select>
        <option>选择1</option>
        <option>选择2</option>
        <option>选择3</option>
        <option>选择4</option>
    </select>
    <br>
    <!-- 与上面不同的是可以不选择提供的选项，而输入自己的选项 -->
    <input type="text" list="testList" placeholder="请输入你的选择">
    <datalist id="testList"><!-- 必须配合type="text"来使用，否则不会单独显示 -->
        <option>选择1</option>
        <option>选择2</option>
        <option>选择3</option>
        <option>选择4</option> 
    </datalist>

    <input type="date"><!-- 日期类型 不支持IE，火狐浏览器 -->
    <input type="search">
    <!-- 用户虽然看不到，但是提交表单的时候会把value值一起提交 -->
    <input type="hidden" value="隐藏的内容">
    <input type="image" src="password.png" width="20px">
    <!-- 如果要上传文件的话，必须设置属性 form enctype="multipart/form-data" -->
    <input type="file" multiple><!-- multiple是指支持多个文件上传 -->
    <br>
    <input type="file" required><!-- required是指必须上传文件 -->
</form>

创建分区响应图

分区响应图是指：将一张图片进行划分，用户点击不同的区域的时候，触发不同的点击事件。

该图需要设置usemap属性，属性值是一个map的ID名，map由area组成，即area是触发点击的区域，而area的shape属性说明由下表给出：

<table border="1px"> shape的值 coords属性解释 Rect 这个值代表矩形区域，用四个逗号分割的整数描述，即图像左边缘图像上边缘图像右边缘图像下边缘 Circle 这个值代表圆形区域，用三个逗号分割的整数描述，即图像左边缘到圆心的距离图像上边缘到圆心的距离圆的半径 Poly 这个值代表多边形区域，用至少六个逗号分割的整数描述，每一个数字表示多边形的一个顶点 Default 这个值代表默认区域，不需要设置coords的值，即默认覆盖整张图片

    <img src="OIP.png" usemap="#test_map">
    
    <map name="test_map">
        <area href="4.html" shape="rect" coords="4,10,63,66" target="_blank">
        <area href="9.html" shape="rect" coords="64,10,120,66" target="_blank">
    </map>

载入视频

<video src="test_video.mp4" controls poster="cut.png"></video>

属性	属性介绍
src	视频地址
width	视频宽度
height	视频高度
autoplay	网页完成后自动播放
preload	是否在页面加载后载入视频。 auto - 当页面加载后载入整个视频 metadata- 当页面加载后只载入第一帧 none - 当页面加载后不载入视频
controls	向用户显示控件，比如播放按钮
loop	当媒介文件完成播放后再次开始播放。
poster	视频封面

由于不同的浏览器支持的视频格式不一样，同一款浏览器版本不同，支持的视频格式也不同，但是MP4格式和ogg格式的视频几乎覆盖了大多数浏览器的大多数版本，因此一般在载入视频的地方准备好两种素材就可以了

    <video src="test_video.mp4" controls poster="cut.png">
        <source src="test_video.mp4" type="video/mp4"> <!-- 默认使用这个资源播放，播放失败则播放下面的 -->
        <source src="test_video.ogg" type="video/ogg">
    </video>

html语法二

表单

创建分区响应图

载入视频