HTML表單元素之<input />

定義

input元素是基于Web的表單創(chuàng)建交互式控件，方便接受來自用戶的數(shù)據(jù)。

默認(rèn)style

  • 行內(nèi)塊元素display: inline-block;
  • 具有邊框border屬性
  • 獲取焦點(diǎn)的時(shí)候，默認(rèn)是通過outline屬性進(jìn)行控制。

重要屬性

  • type：input標(biāo)簽的工作方式由type屬性決定。
取值 解釋
text 單行文本區(qū)域、輸入的文本可見【默認(rèn)值】
password 單行文本區(qū)域，輸入的文本被遮蓋
number 輸入數(shù)字的控件
radio 單選按鈕，多個(gè)擁有相同name值的選項(xiàng)中選擇一個(gè)
checkout 復(fù)選框
button 沒有默認(rèn)行為的按鈕，按鈕中的值顯示其value屬性的值
file 上傳文件
  • name：input表單控件的名字【沒有name屬性時(shí)，不會(huì)一起提交表單】
  • value：值
  • size：默認(rèn)值為20。僅指定一次可以看到多少個(gè)字符【與minlength和maxlength區(qū)分】。類似控制input的width。
  • minlength - maxlength：能夠接受輸入的最小-最大字符數(shù)
  • pattern：驗(yàn)證文本框的正則表達(dá)式
  • placeholder：簡短的提示信息
  • disabled：布爾值。表示控件是否被禁用?！窘玫谋韱卧夭粫?huì)一起提交】
  • readonly：布爾值。表示控件是否可以編輯。【只讀的表單元素將會(huì)一起提交】
  • required：布爾值。表示此值為必填項(xiàng)或提交前必須檢查該值。

案例：

<!DOCTYPE html>
<html>
    <head>
        <title>input中type為text</title>
    </head>
    <body>
        <form>
            <div>
                <label for="uname1">username1: </label>
                <input type="text" id="uname1">
            </div>
            <div>
                <label for="uname2">username2: </label>
                <input type="text" id="uname2" name="name2">
            </div>
            <div>
                <label for="uname3">username3: </label>
                <input type="text" id="uname3" name="name3" placeholder="請輸入用戶名">
            </div>
            <div>
                <label for="uname4">username4: </label>
                <input type="text" id="uname4" name="name4" value="請輸入用戶名">
            </div>
            <div>
                <label for="uname5">username5: </label>
                <input type="text" id="uname5"  name="name5" minlength="1" maxlength="5">
            </div>
            <div>
                <label for="uname6">username6: </label>
                <input type="text" id="uname6"  name="name6" minlength="1" maxlength="5" required>
            </div>
            <div>
                <label for="uname7">username7: </label>
                <input type="text" id="uname7"  name="name7" disabled>
            </div>
            <div>
                <label for="uname8">username8: </label>
                <input type="text" id="uname4" name="name8" readonly>
            </div>
            <div>
                <label for="uname9">username9: </label>
                <input type="text" id="uname9" name="name9" size="30">
            </div>
            <div>
                <button>Submit</button>
            </div>
        </form>
    </body>
</html>

結(jié)果：


input中的常用屬性.gif

input中的校驗(yàn)

一些偽類可用于設(shè)置表單元素的樣式，以幫助用戶查看其值是有效還是無效。即:valid（有效）和:invalid（無效）。

<!DOCTYPE html>
<html>
    <head>
        <title>input中type為text</title>
        <style type="text/css">
            div {
                margin-bottom: 10px;
                position: relative;
            }

            input+span {
                padding-right: 30px;
            }

            input:invalid+span:after {
                position: absolute;
                content: '?';
                padding-left: 5px;
            }

            input:valid+span:after {
                position: absolute;
                content: '?';
                padding-left: 5px;
            }
        </style>
    </head>
    <body>
        <form>
            <div>
                <label for="uname">Choose a username: </label>
                <input type="text" id="uname" name="name" minlength="2" required>
                <span></span>
            </div>
            <div>
                <button>Submit</button>
            </div>
        </form>
    </body>
</html>

結(jié)果：


input校驗(yàn).png

使用

type="text"

作用：創(chuàng)建基本的單行輸入。
屬性：【以上列舉的重要屬性除外】

  • pattern：匹配正則表達(dá)式【不需要使用required屬性就能夠影響偽類】

type="password"

作用：作為一行純文本編輯器控件呈現(xiàn)，其中文本被"(*)"或"(·)"等符號(hào)替換。


type=password的基本樣式.png

屬性：

  • autocomplete：可以讓密碼管理器自動(dòng)輸入密碼。
    取值：on、off、current-password、new-password
  • inputmode：指定輸入模式
    取值：text、numeric、tel、url、email
  • pattern：添加正則表達(dá)式的驗(yàn)證。

type="number"

作用：讓用戶輸入一個(gè)數(shù)字，包含內(nèi)置樣式以拒絕非數(shù)字的輸入。當(dāng)此元素獲取焦點(diǎn)之后，將會(huì)出現(xiàn)步進(jìn)的箭頭，方便用戶操作。


type=number的最初樣式.png

屬性：

  • step：此屬性可以設(shè)置步長的值。【可以是整數(shù)也可以是小數(shù)】
  • min/max：指定該字段的最大和最小值。
  • pattern：當(dāng)type=number的時(shí)候，pattern屬性將會(huì)失效，只需要使用min/max屬性來控制即可。
  • size：此屬性將會(huì)失效，我們只能通過css的width屬性來控制input框的大小。
  • list：指定該屬性來從中進(jìn)行選擇，該列表屬性包含<datalist>的ID作為其值。

案例：list屬性

<!DOCTYPE html>
<html>
    <head>
        <title>input中type為text</title>
        <style type="text/css">
            div {
                margin-bottom: 10px;
                position: relative;
            }

            input+span {
                padding-right: 30px;
            }

            input:invalid+span:after {
                position: absolute;
                content: '?';
                padding-left: 5px;
            }

            input:valid+span:after {
                position: absolute;
                content: '?';
                padding-left: 5px;
            }
        </style>
    </head>
    <body>
        <form>
            <input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers">
            <span class="validity"></span>
            
            <datalist id="defaultNumbers">
              <option value="10045678">
              <option value="103421">
              <option value="11111111">
              <option value="12345678">
              <option value="12999922">
            </datalist>
        </form>
    </body>
</html>

結(jié)果：


<datalist>a和list屬性的初次使用.png

type="radio"

作用：單選按鈕，允許在多個(gè)擁有相同的name值的選項(xiàng)中選擇其中一個(gè)。
注意事項(xiàng)：

  • 一個(gè)單選按鈕組：有相同name屬性的單選按鈕組成。
  • 每個(gè)單選按鈕必須有value屬性，否則提交的表單數(shù)據(jù)將只有name，沒有對應(yīng)的值。
  • 默認(rèn)選中的按鈕：使用checked屬性進(jìn)行控制
<!DOCTYPE html>
<html>
    <head>
        <title>input中type為radio</title>
    </head>
    <body>
        <form>
            <p>Please select your preferred contact method:</p>
            <div>
                <input type="radio" id="contactChoice1" name="contact" value="email">
                <label for="contactChoice1">Email</label>
                <input type="radio" id="contactChoice2" name="contact" value="phone">
                <label for="contactChoice2">Phone</label>
                <input type="radio" id="contactChoice3" name="contact" value="mail">
                <label for="contactChoice3">Mail</label>
            </div>
            
            <input type="text" id="contactChoice3" name="name">
            <label for="contactChoice3">Name</label>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
        <pre id="log">
        </pre>

        <script type="text/javascript">
            var form = document.querySelector("form");
            var log = document.querySelector("#log");

            form.addEventListener("submit", function(event) {
                var data = new FormData(form);
                var output = "";
                console.dir(data)
                for (const entry of data) {
                    console.log(entry)
                    output += entry[0] + "=" + entry[1] + "\r";
                };
                log.innerText = output;
                event.preventDefault();
            }, false);
        </script>

    </body>
</html>

結(jié)果：


type=radio和FormData的初次使用.png

type="checkout"

作用：定義一個(gè)復(fù)選框，可以設(shè)定為選中或者未選中。
注意事項(xiàng)：

  • name：type=checkbox時(shí)，name的值可以不同，可以相同，后臺(tái)可以組成一個(gè)Array?！総ype=radio的時(shí)候，name的值是一定相同的】
  • value：value的值如果沒有填寫，默認(rèn)為"on"，建議添加value屬性
  • checked：checkbox的默認(rèn)選中的由checked屬性決定。
    案例：type=checkbox
<!DOCTYPE html>
<html>
    <head>
        <title>input中type為radio</title>
    </head>
    <body>
        <form>
            <p>Choose your monster's features:</p>

            <div>
                <input type="checkbox" id="scales" name="checkbox" value="Scales">
                <label for="scales">Scales</label>
            </div>

            <div>
                <input type="checkbox" id="horns" name="checkbox" value="Horns">
                <label for="horns">Horns</label>
            </div>
            <button type="button">submit</button>
        </form>
        <pre id="log">
        </pre>

        <script type="text/javascript">
            var form = document.querySelector("form");
            var log = document.querySelector("#log");
            var button = document.querySelector("button")
            
            button.addEventListener("click", function(event) {
                var data = new FormData(form);
                var output = "";
                for (const entry of data) {
                    console.log(entry)
                    output += entry[0] + "=" + entry[1] + "\r";
                };
                log.innerText = output;
                event.preventDefault();
            }, false);
        </script>

    </body>
</html>

結(jié)果：


type=checkbox.png

type="button"

作用：創(chuàng)建一個(gè)沒有默認(rèn)行為的按鈕；顯示的值通過value屬性控制，默認(rèn)為空?！緃5中通過<button>取代】。type還可以指定為其他值，如："submit"【提交】、"reset"【重置】，設(shè)置為此類型之后就有了默認(rèn)的行為。
屬性：

  • form：與當(dāng)前頁面的<form>標(biāo)簽進(jìn)行綁定。取值為form標(biāo)簽中的id屬性值。如果<input type-'submit' />在<form>中，可以不指定form屬性，默認(rèn)與當(dāng)前form關(guān)聯(lián)。
  • formenctype：指定提交的內(nèi)容的格式，取值有application/x-www-form-urlencoded、multipart/form-data、text/plain等【將會(huì)覆蓋form中的action屬性】
  • formaction：處理按鈕提交的路徑【將會(huì)覆蓋form中的action屬性】
  • formmethod：指定提交的方式：取值有post、get、‘put’【將會(huì)覆蓋form中的method】
  • formtarget：表示接收提交的表單后在哪里顯示，取值有_self、_blank、_parent、_top

案例

<!DOCTYPE html>
<html>
    <head>
        <title>input中type為radio</title>
    </head>
    <body>
        <form>
            <p>Please select your preferred contact method:</p>
            <div>
                <input type="radio" id="contactChoice1" name="contact" value="email">
                <label for="contactChoice1">Email</label>
                <input type="radio" id="contactChoice2" name="contact" value="phone">
                <label for="contactChoice2">Phone</label>
                <input type="radio" id="contactChoice3" name="contact" value="mail">
                <label for="contactChoice3">Mail</label>
            </div>
            
            <input type="text" id="contactChoice3" name="name">
            <label for="contactChoice3">Name</label>
            
            <div>
                <input type="submit" value="Submit" />
            </div>
        </form>
        <pre id="log">
        </pre>

        <script type="text/javascript">
            var form = document.querySelector("form");
            var log = document.querySelector("#log");

            form.addEventListener("submit", function(event) {
                var data = new FormData(form);
                var output = "";
                console.dir(data)
                for (const entry of data) {
                    console.log(entry)
                    output += entry[0] + "=" + entry[1] + "\r";
                };
                log.innerText = output;
                event.preventDefault();
            }, false);
        </script>

    </body>
</html>

結(jié)果：


type=button的運(yùn)行結(jié)果.png

<button></button>元素

作用：表示是一個(gè)可點(diǎn)擊的按鈕，可以用在表單或文檔其他需要使用簡單標(biāo)準(zhǔn)按鈕的地方。
屬性：button的屬性和<input type="button" />中的屬性基本一致，

  • type： 設(shè)置button的類型。取值有button、submit、reset、menu【打開一個(gè)指定<menu>元素定義的菜單】
注意事項(xiàng)

1、<button>比<input />更容易使用樣式。<input>只能使用文本樣式，<button>能使用HTML內(nèi)容
2、如果按鈕不是向服務(wù)器提交數(shù)據(jù)，保證<button>中的type為button。·

type="file"

作用：用戶可以選擇一個(gè)或多個(gè)文件以提交表單的方式上傳到服務(wù)器上，或者通過JavaScript的File API對文件進(jìn)行操作。
附加屬性：

  • accept：定義了文件input應(yīng)該接受的文件類型。有多種類型的時(shí)候，使用逗號(hào)進(jìn)行分割。取值有：
    以.開頭的合法的文件名拓展名【指定單個(gè)】、
    一個(gè)不帶拓展名的MIME類型字符串、
    字符串audio/*、video/*、image/*【指定一類】
  • capture：捕獲圖像或視頻數(shù)據(jù)的源，如指定使用哪個(gè)攝像頭去獲取數(shù)據(jù)。
  • files：被選擇的文件以HTMLInputElement.files屬性返回，值的類型是FileList對象。即所有選擇的文件。
  • multiple：布爾屬性，表示用戶可以選擇多個(gè)文件。

注意事項(xiàng)

  1. accept屬性不驗(yàn)證所選文件的類型，只是為瀏覽器提供指示來引導(dǎo)用戶選擇正確的文件類型。
  2. 出于安全原因，源文件的實(shí)際路徑?jīng)]有顯示在input的value屬性中，顯示的內(nèi)容為C:\fakepath\+文件名

案例：

<!DOCTYPE html>
<html>
    <head>
        <title>input中type為radio</title>
        <style type="text/css">
            label {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <form method="post" enctype="multipart/form-data">
            <div>
                <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
                <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
            </div>
            <div class="preview">
                <p>No files currently selected for upload</p>
            </div>
            <div>
                <button>Submit</button>
            </div>
        </form>

        <script type="text/javascript">
            // 實(shí)際的輸入框
            const input = document.querySelector('input');
            input.style.opacity = 0; // 不使用 visibility: hidden 或者 display: none，因?yàn)檩o助技術(shù)將后兩種樣式解釋為文件 input 是不可交互的。
            // 選中文件的提示框
            const preview = document.querySelector('.preview');
            // 接收的文件的類型
            const fileTypes = [
                'image/jpeg',
                'image/pjpeg',
                'image/png'
            ];
            
            // 添加input的change事件
            input.addEventListener("change", updateImageDisplay)

            // 驗(yàn)證文件類型的函數(shù)
            function validFileType(file) {
                return fileTypes.includes(file.type);
            }
            
            // 大小轉(zhuǎn)化
            function returnFileSize(number) {
              if(number < 1024) {
                return number + 'bytes';
              } else if(number >= 1024 && number < 1048576) {
                return (number/1024).toFixed(1) + 'KB';
              } else if(number >= 1048576) {
                return (number/1048576).toFixed(1) + 'MB';
              }
            }
            
            // input中change的回調(diào)函數(shù)
            function updateImageDisplay() {
                // 先清空提示框中的內(nèi)容
                while (preview.firstChild) {
                    preview.removeChild(preview.firstChild); // js操作DOM值移除子元素
                }

                const curFiles = input.files;
                if (curFiles.length === 0) { // 沒有選中文件
                    const para = document.createElement('p'); // js操作DOM之創(chuàng)建元素
                    para.textContent = 'No files currently selected for upload';
                    preview.appendChild(para); // js操作DOM之添加子元素
                } else {
                    const list = document.createElement('ol');
                    preview.appendChild(list);

                    for (const file of curFiles) {
                        const listItem = document.createElement('li');
                        const para = document.createElement('p');
                        if (validFileType(file)) {
                            para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
                            const image = document.createElement('img');
                            image.src = URL.createObjectURL(file);

                            listItem.appendChild(image);
                            listItem.appendChild(para);
                        } else {
                            para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
                            listItem.appendChild(para);
                        }

                        list.appendChild(listItem);
                    }
                }
            }
        </script>

    </body>
</html>

運(yùn)行截圖


type=file.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容