HTML-Objekt: Einführung in einige Objekteigenschaften von HTML-HTML-Tutorial-php.cn

Der Inhalt dieses Artikels befasst sich mit HTML-Objekten: Eine Einführung in einige Objekteigenschaften von HTML. Ich hoffe, dass er für Freunde hilfreich ist.

Formularobjekt

Formularobjektmethode

reset(): Setzt alle Eingabeelemente des Formulars auf ihre Standardwerte zurück.

submit(): Formular abschicken.

Textobjekt

Textobjekteigenschaft

disabled: Legt fest oder gibt zurück, ob das Textfeld deaktiviert werden soll.

readOnly: Legt fest oder gibt zurück, ob das Textfeld schreibgeschützt sein soll.

Wert: Legen Sie den Wert des Wertattributs des Textfelds fest oder geben Sie ihn zurück.

Textobjektmethode

focus(): Fokus auf das Textfeld setzen.

Beispiel

<!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>

Nach dem Login kopieren

Funkobjekt

Funkobjekteigenschaft

geprüft: Legt den Status des Optionsfelds fest oder gibt ihn zurück.

deaktiviert: Legt fest oder gibt zurück, ob das Optionsfeld deaktiviert ist.

Wert: Legt den Wert des Wertattributs des Optionsfelds fest oder gibt ihn zurück.

Checkbox-Objekt

Checkbox-Objekteigenschaft

checked: Legt fest oder gibt zurück, ob das Kontrollkästchen aktiviert werden soll.

disabled : Legt fest oder gibt zurück, ob das Kontrollkästchen deaktiviert sein soll.

Wert: Legen Sie den Wert des Wertattributs des Kontrollkästchens fest oder geben Sie ihn zurück.

Objekt auswählen

Objektsammlung auswählen

Optionen []: Gibt ein Array zurück, das alle Optionen in der Dropdown-Liste enthält.

Objekteigenschaft auswählen

deaktiviert: Legt fest oder gibt zurück, ob die Dropdown-Liste deaktiviert werden soll.

Länge: Gibt die Anzahl der Optionen in der Dropdown-Liste zurück.

selectedIndex: Setzt die Indexnummer des ausgewählten Elements in der Dropdown-Liste oder gibt sie zurück.

Objektmethode auswählen

add(): Fügt eine Option zur Dropdown-Liste hinzu.

remove(): Eine Option aus der Dropdown-Liste entfernen.

Optionsobjekt

Optionsobjekt-Konstruktionsmethode

Option(text,value): Optionsobjekt erstellen

<🎜 durch Text und Wert > Option Objektattribut

ausgewählt: Setzt den Wert des ausgewählten Attributs oder gibt ihn zurück.

Text: Legt den Klartextwert einer Option fest oder gibt ihn zurück.

Wert: Legen Sie den an den Server gesendeten Wert fest oder geben Sie ihn zurück.

Beispiel für Objekt und Optionsobjekt auswählen

<!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>

Nach dem Login kopieren

Registrierung

<!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>
            //使用$()函数可节省代码量
            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>

Nach dem Login kopieren

Bildobjekt

Bildobjektattribut

src: Legt die URL des Bildes fest oder gibt sie zurück.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonHTML-Objekt: Einführung in einige Objekteigenschaften von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!