明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

HTML對象：html一些對象屬性的說明

發(fā)表時間：2023-09-07 來源：明輝站整理相關軟件相關文章人氣：

[摘要]這篇文章給大家分享的內(nèi)容是關于HTML對象：html一些對象屬性的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。Form 對象Form 對象方法reset() ：把表單的所有輸入元素重置為它們的默認值。submit() ：提交表單。Text 對象Text 對象屬性disabl...
這篇文章給大家分享的內(nèi)容是關于HTML對象：html一些對象屬性的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

Form 對象

Form 對象方法

reset() ：把表單的所有輸入元素重置為它們的默認值。

submit() ：提交表單。

Text 對象

Text 對象屬性

disabled ：設置或返回文本域是否應被禁用。

readOnly ：設置或返回文本域是否應是只讀的。

value ：設置或返回文本域的 value 屬性的值。

Text 對象方法

focus() :在文本域上設置焦點。

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input name = "wd" />
            <input type="submit" value="百度一下" onclick="sub()">
        </form>
        <script>
            var form = document.getElementsByTagName("form")[0];
            var text = document.getElementsByName("wd")[0];
            text.focus();
            function sub(){
                var text = document.getElementsByName("wd")[0];
//              text.value = "魔道";
//              text.readOnly = "true";
//              console.log(text.readOnly);
//              text.disabled = "true";
                console.log(text.disabled);
                text.focus();
            }
            //type為text、password、textarea的標簽均有value、focus、disabled、readOnly
        </script>
    </body>
</html>

Radio 對象

Radio 對象屬性

checked ：設置或返回單選按鈕的狀態(tài)。

disabled ：設置或返回是否禁用單選按鈕。

value ：設置或返回單選按鈕的 value 屬性的值。

Checkbox 對象

Checkbox 對象屬性

checked ：設置或返回 checkbox 是否應被選中。

disabled ：設置或返回 checkbox 是否應被禁用。

value ：設置或返回 checkbox 的 value 屬性的值

Select 對象

Select 對象集合

options[] ：返回包含下拉列表中的所有選項的一個數(shù)組。

Select 對象屬性

disabled ：設置或返回是否應禁用下拉列表。

length ：返回下拉列表中的選項數(shù)目。

selectedIndex ：設置或返回下拉列表中被選項目的索引號。

Select 對象方法

add() ：向下拉列表添加一個選項。

remove() ：從下拉列表中刪除一個選項。

Option 對象

Option 對象構造方法

Option(text,value) ：通過text和value值創(chuàng)建Option對象

Option 對象屬性

selected ：設置或返回 selected 屬性的值。

text ：設置或返回某個選項的純文本值。

value ：設置或返回被送往服務器的值。

Select對象及Option對象示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option  value="1">一年級</option>
            <option  value="2">二年級</option>
            <option  value="3">三年級</option>
            <option  value="4">四年級</option>
        </select>
        <input type="button" onclick="text()" value="按鈕" />
        <script type="text/javascript">
            function text(){
                var select = document.getElementById("grade");
                console.log(select.disabled);
                console.log(select.length);
                console.log(select.selectedIndex);

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`")

                var options = select.options;
                console.log(options[select.selectedIndex].value);

                console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")

                for(var i=0;i<options.length;i++){
                    console.log(options[i].value);
                    console.log(options[i].selected);
                    console.log(options[i].text);
                }

                var option = new Option("五年級","5");
                select.add(option);
                select.remove(0);
            }   
        </script>
    </body>
</html>

注冊表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span style="color:red;" id="wrong-massage"></span><br />
        <form onsubmit="return check()">
            <table>
                <tr>
                    <td>用戶名：</td>
                    <td><input id="name"  placeholder="請輸入用戶名" onblur="check_name()" ></td>
                </tr>
                <tr>
                    <td>密碼：</td>
                    <td><input id="pw" type="password" placeholder="請輸入密碼" onblur="check_pw()"></td>
                </tr>
                <tr>
                    <td>確認密碼：</td>
                    <td><input id="pw-check" type="password" placeholder="請輸入確認密碼"/></td>
                </tr>
            </table>
            <input type="radio" name="sex" value="0"/>男
            <input type="radio" name="sex" value="1"/>女
            <br />
            <input type="checkbox" name="hobby" value="0"/>羽毛球
            <input type="checkbox" name="hobby" value="1"/>籃球
            <input type="checkbox" name="hobby" value="2"/>乒乓球
            <input type="checkbox" name="hobby" value="3"/>足球
            <br />
            <select id="grade">
                <option value="1">大一</option>
                <option value="2">大二</option>
                <option value="3">大三</option>
                <option value="4">大四</option>
            </select>
            <br />
            <td><input type="reset" value="重置" /></td>
            <td><input type="submit" value="注冊"/></td>
        </form>
        <script>
            //使用$()函數(shù)可節(jié)省代碼量
            function $(id){
                return document.getElementById(id);
            }

            function check(){
                var n = document.getElementById("name");
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");
                var c = document.getElementById("pw-check");

                if(n.value.length>12){
                    msg.innerHTML = "用戶名不能超過15個字符，請重新輸入！";
                    n.focus();
                    return false;
                }
                if(n.value.length==0){
                    msg.innerHTML = "用戶名不能為空，請重新輸入！";
                    n.focus();
                    return false;
                }
                if(w.value.length>12){
                    msg.innerHTML = "密碼不能超過12個字符，請重新輸入！";
                    w.focus();
                    return false;
                }
                if(w.value.length==0){
                    msg.innerHTML = "密碼不能為空，請重新輸入！";
                    w.focus();
                    return false;
                }
                if(w.value!=c.value){
                    msg.innerHTML = "密碼錯誤，請重新輸入！";
                    c.focus();
                    return false;
                }

                var sex = document.getElementsByName("sex");
                var hobby = document.getElementsByName("hobby");
                for(var i=0;i<sex.length;i++){
                    sex[i].disabled=true;
                    console.log(sex[i].checked+" "+sex[i].value);
                }

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")

                for(var i=0;i<hobby.length;i++){
                    hobby[i].checked = true;
                    console.log(hobby[i].checked+" "+hobby[i].value);
                }

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")


                var select = document.getElementById("grade");
                var options = select.options;
                console.log(select.length);
                console.log(select.selectedIndex);
                console.log(options[select.selectedIndex].value);
                for(var i=0;i<options.length;i++){
                    var option = options[i];
                    console.log(option.value)
                    select.disabled = true;
                }
                return false;
            }

            function check_name(){
                var n = document.getElementById("name");
                var msg = document.getElementById("wrong-massage");

                if(n.value.length>12){
                    msg.innerHTML = "用戶名不能超過15個字符，請重新輸入！";
                    n.value = "";
                    n.focus();
                }
                else if(n.value.length==0){
                    msg.innerHTML = "用戶名不能為空，請重新輸入！";
                    n.focus();
                }
                else{
                    msg.innerHTML = " ";
                }
            }
            function check_pw(){
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");

                if(w.value.length>12){
                    msg.innerHTML = "密碼不能超過12個字符，請重新輸入！";
                    w.value = "";
                    w.focus();
                }
                else if(w.value.length==0){
                    msg.innerHTML = "密碼不匹配，請重新輸入！";
                    w.focus();
                }
                else
                {
                    msg.innerHTML = " ";
                }
            }
        </script>
    </body>
</html>

Image 對象

Image 對象屬性

src：設置或返回圖像的 URL。

相關推薦：

以上就是HTML對象：html一些對象屬性的介紹的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。