HTML FORM input 元素裡的各種 attributes 屬性值之介紹

Posted on Edited on In Views: Disqus:

 

有關input tag可用的attributes為

一、readonly

First name:

Last name:
 
<!DOCTYPE html>
<html>
<body>
    <form action="">
        First name:<br>
        <input type="text" name="firstname" value="John" readonly>
        <br>
        Last name:<br>
        <input type="text" name="lastname">
    </form>
</body>
</html>

 

二、disabled

First name:

Last name:
 
<!DOCTYPE html>
<html>
<body>
    <form action="">
        First name:<br>
        <input type="text" name="firstname" value="John" disabled>
        <br>
        Last name:<br>
        <input type="text" name="lastname">
    </form>
</body>
</html>

但我比較推薦下面這種寫法結構較好

<!DOCTYPE html>
<html>
<body>
    <form action="">
        First name:<br>
        <input type="text" name="firstname" value="John" disabled="disabled">
        <br>
        Last name:<br>
        <input type="text" name="lastname">
    </form>
</body>
</html>

 

三、autocompele

First name:
Last name:
E-mail:
 
<!DOCTYPE html>
<html>
<body>
    <form action="" autocomplete="on">
        First name:<input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        E-mail: <input type="email" name="email" autocomplete="off"><br>
        <input type="submit">
    </form>
</body>
</html>

使用autocompele可以自動帶入以前輸入過的字串，

另可個別指定哪個input不要使用autocompele功能

 

四、novalidate

E-mail:  
<!DOCTYPE html>
<html>
<body>
    <form action="">
        E-mail: <input type="email" name="user_email">
        <input type="submit">
    </form>
</body>
</html>

此功能可以在前端檢查數值，如不使用查驗則在form tag加上novalidate

<!DOCTYPE html>
<html>
<body>
    <form action="" novalidate>
        E-mail: <input type="email" name="user_email">
        <input type="submit">
    </form>
</body>
</html>

 

五、autofocus

First name:
Last name:
 
<!DOCTYPE html>
<html>
<body>
    <form action="action_page.php">
        First name:<input type="text" name="fname"><br>
        Last name: <input type="text" name="lname" autofocus><br>
        <input type="submit">
    </form>
</body>
</html>

頁面初始時自動focus在哪一個欄位

 

六、form

First name:
 

Last name: 

<!DOCTYPE html>
<html>
<body>
    <form action="" id="form1">
        First name: <input type="text" name="fname"><br>
        <input type="submit" value="Submit">
    </form>
    Last name: <input type="text" name="lname" form="form1">
</body>
</html>

此功能可以讓input tag間接跳出form tag外，只要指定到form的歸屬即可。

 

七、formaction

First name:
Last name:

 
<!DOCTYPE html>
<html>
<body>
    <form action="http://www.google.com.tw">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        <input type="submit" value="path1"><br>
        <input type="submit" formaction="http://www.yahoo.com.tw" value="path2">
    </form>
</body>
</html>

當type為submit或image時，此功能可以個別指定formaction要傳到哪個網頁。

另外還有formenctype、formmethod、formnovalidate、formtarget，

都是可在input tag單獨設定該tag可做什麼事。

 

八、alt、width、height

First name:
Last name:
 
<!DOCTYPE html>
<html>
<body>
    <form action="">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        <input type="image" src="http://www.w3schools.com/html/img_submit.gif" alt="Submit" width="48"
         height="48">
    </form>
</body>
</html>

 

九、list

<!DOCTYPE html>
<html>
<body>
    <form action=@Url.Action("Index") method="post">
        <input list="browsers" name="browser">
        <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
        </datalist>
        <input type="submit">
    </form>
</body>
</html>

此於上一篇學習HTML-form elements文章有舉過例子。

 

十、max、min

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
Quantity (between 1 and 5):
 
<!DOCTYPE html>
<html>
<body>
    <form action="">
        Enter a date before 1980-01-01:
        <input type="date" name="bday" max="1979-12-31"><br>
        Enter a date after 2000-01-01:
        <input type="date" name="bday" min="2000-01-02"><br>
        Quantity (between 1 and 5):
        <input type="number" name="quantity" min="1" max="5"><br>
        <input type="submit">
    </form>
</body>
</html>

此功能用來指定最大與最小可選取範圍

 

十一、multiple

Select images:  
<!DOCTYPE html>
<html>
<body>
    <form action="">
        Select images: <input type="file" name="img" multiple>
        <input type="submit">
    </form>
</body>
</html>

當type為file時，可配合使用multiple來決定是否可以一次選取多個檔案。

或是使用下面語法也可

<!DOCTYPE html>
<html>
<body>
    <form action="">
        Select images: <input type="file" name="img" multiple="multiple">
        <input type="submit">
    </form>
</body>
</html>

 

十二、pattern

Country code:  
<!DOCTYPE html>
<html>
<body>
    <form action="">
        Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"
                       title="Three letter country code">
        <input type="submit">
    </form>
</body>
</html>

使用regular expression來判斷輸入符合條件的字串，

上例代表輸入不論大小寫的三個英文字母皆可成功輸入。

此例還加上了title提示屬性其用法類似placeholder。

另一例子，如果要限定輸入三個中文字的話，使用

pattern="^[0-9a-zA-Z]{3}$"或是pattern="^\w{3}$"

是沒用的，我的作法為pattern="^.{3}$"

 

十三、required

Username:  
<!DOCTYPE html>
<html>
<body>
    <form action="">
        Username: <input type="text" name="usrname" required>
        <input type="submit">
    </form>
</body>
</html>

或

<!DOCTYPE html>
<html>
<body>
    <form action="">
        Username: <input type="text" name="usrname" required="required">
        <input type="submit">
    </form>
</body>
</html>

用來指定欄位必須要輸入資料才可做submit，

也就是說不允許空字串submit必須要一個字元以上才行

 

十四、step

 
<!DOCTYPE html>
<html>
<body>
    <form action="">
        <input type="number" name="points" step="3">
        <input type="submit">
    </form>
</body>
</html>

此功能可以讓輸入數值以一定的遞增量輸入

 

另還有size、maxlength、value...等等。

參考資料：

HTML <input> Tag