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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。