HTML表单与文件

时间 2019-11-20

标签 html 表单文件栏目 HTML 繁體版

原文原文链接

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    当前行车速度：<meter value="159" min="0" max="220" low="0" high="160">120</meter>公里/小时<br/>
    <!--
    属性说明：
        value:当前值 默认0
        min：最小值 默认0
        max：最大值 默认1
        low：指定范围最小值 必须 > min
        high：指定范围最大值 必须 < max
        optimun：有效范围最佳值 若是该值 > high 说明越大越好，< low 说明越小越好
    -->
    任务完成比例：<progress value="30" max="100">30/100</progress><br/>
<script type="text/javascript">
</script>
</body>
</html>

新增元素与属性

form：指明元素归属哪一个表单，能够写在form标签的外部，之前全部的表单元素都必须写在form表单内的
formaction：元素所属的action
formmethod：元素提交方式
placeholder：提示输入
autofocus：获取输入焦点
list：与datelist配合生成下拉框javascript

1 <input type="text" name="greeting" list="greetings">
2     <datalist id="greetings" style="disable:none">
3         <option value="1">早上好</option>
4         <option value="2">中午好</option>
5         <option value="3">晚上好</option>
6     </datalist>

新增与改良的input type属性

search：用于站点搜索，样式与text同样，但safari中search与text是不一样的
tel：与text相似，但用于电话
url：与text文本框相似，但必须输入知足url格式的文字
email：可使用multiple属性，传递多个email地址，用逗号分隔
datetime、date、month、week、time、datetime-location
number
range：只容许输入必定范围内数值的文本框，包含min与max属性，默认0~100
color：颜色文本选择框
file：能够经过指定multiple属性，选择多个文件html

验证

required：是否必填
pattern：指定正则表达式
min、max：对于数值或日期类型，设置了最值
step：增大或减少时的步幅
formnovalidate：配置在提交按钮上或input上，对应的校验会消失java

文件API

FileList对象：表示用户选择的文件列表
file对象：FileList中的每一个元素都是file对象正则表达式

举例：获取多选的文件浏览器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function showFileName(){
            var file;
            var upFiles = document.getElementById("file").files;
            var len = upFiles.length;
            for (var i = 0;i < len;i++){
                file = upFiles[i];
                document.write(file.name);
                document.write("<br/>");
            }
        }
    </script>
</head>
<body>
    文件选择:<input type="file" multiple id="file" size="80" /><input type="button" value="文件上传" onclick="showFileName()">

</body>
</html>

1 下拉框app

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        单选
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select><tr> 多选 <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>0</option> </select><tr> optiongroup <select multiple="multiple"> <optgroup label="书籍1"> <option>1_1</option> <option>1_2</option> <option>1_3</option> <option>1_4</option> <option>1_5</option> <option>1_6</option> </optgroup> <optgroup label="书籍2"> <option>2_1</option> <option>2_2</option> <option>2_3</option> <option>2_4</option> <option>2_5</option> <option>2_6</option> </optgroup> </select> </tr> </form> <script type="text/javascript"> </script> </body> </html>

2 表单属性ui

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <!-- placeholder 属性指定提示内容 -->
        <input type="text" placeholder="提示内容"><br/>
        <!--输入与下拉同时使用-->
        <input type="text" name="book" list="books" /><br/>

        <!--经过指定formaction属性提交给不一样的Action，再也不须要经过JavaScript修改提交的Action-->
        <input type="submit" formaction="action1">
        <input type="submit" formaction="action2">
    </form>
    <datalist id="books">
        <option>书籍_1</option>
        <option>书籍_2</option>
        <option>书籍_3</option>
        <option>书籍_4</option>
    </datalist>
    <hr/>
    多文件上传
    <input type="file" multiple id="images" accept="image/*" />
    <input type="button" value="显示文件" onclick="showDetails()" />
    <script type="text/javascript">
        var showDetails = function(){ var imageFile = document.getElementById("images"); var fileList = imageFile.files; for(var i = 0;i < fileList.length;i++){ var file = fileList[i]; var div = document.createElement("div"); div.innerHTML = "第"+(i+1)+"个文件的文件名是："+file.name+"，该文件大小是："+file.size; document.body.appendChild(div); } } </script> </body> </html>

3 读取上传文件内容url

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    浏览文件：<input type="file" id="file1" /><br/>
    <div id="result"></div>
    <input type="button" value="读取文本文件" onclick="readText();"><br/>
    <input type="button" value="读取二进制文件" onclick="readBinary();"><br/>
    <input type="button" value="以DataURL方式读取" onclick="readURL();"><br/>
<script type="text/javascript">
    var reader = null; if(FileReader){ reader = new FileReader(); }else{ alert("浏览器暂不支持FileReader对象"); } var readText = function(){ reader.readAsText(document.getElementById("file1").files[0],"gbk"); reader.onload = function(){ document.getElementById("result").innerHTML = reader.result; } } var readBinary = function(){ reader.readAsBinaryString(document.getElementById("file1").files[0]); reader.onload = function(){ document.getElementById("result").innerHTML = reader.result; } } var readURL = function(){ reader.readAsDataURL(document.getElementById("file1").files[0]); reader.onload = function(){ document.getElementById("result").innerHTML = reader.result; } } </script> </body> </html>