JavaScript stößt auf einige Formularattribute von HTML5_javascript-Kenntnissen

Eingabeattribut:
Platzhalter: Der Standardwert des Eingabefelds, der dem Benutzer beschreibenden Text oder Eingabeaufforderungsinformationen anzeigt

Autovervollständigung: Werte sind ein- und ausschaltbar. . „Ein“ bedeutet, dass beim Ausfüllen und Absenden des Feldes und anschließender Rückkehr zur Seite bei einer erneuten Eingabe die zuvor eingegebenen Informationen angezeigt werden. Aus bedeutet geschlossen, einschließlich der Sicherheit der Benutzereingabedaten. Die Standardeinstellung ist aktiviert
Autofokus: Legen Sie fest, dass eine Eingabe automatisch den Fokus erhält, wenn die Seite geladen wird. Beachten Sie, dass die Einstellung dieses Attributs nur für eine Eingabe gleichbedeutend ist mit keiner Einstellung.
Listenfunktion und Datenliste: Fügen Sie über die Liste eine Dropdown-Liste zu einem Eingabefeld hinzu. . Es entspricht der in js implementierten Funktion „Autovervollständigung“, kann jedoch keine Fuzzy-Abfragen ausführen
Wenn die Datenliste zwei Werte enthält: „a34343“ und „24234“, erwartet der Benutzer, dass nach der Eingabe von 3 beide Werte angezeigt werden, tatsächlich wird jedoch keiner von ihnen angezeigt.
Es ist eine vollständige Übereinstimmung erforderlich. Wenn Sie beispielsweise „a“ eingeben, wird das Dropdown-Menü „a34343“ angezeigt. Wenn Sie dann „4“ eingeben, wird der Dropdown-Wert ausgeblendet.

erforderlich: Dieses Element muss vor dem Absenden des Formulars ausgefüllt werden, d. h. es darf nicht leer sein. Aufgrund der Aufforderungsmeldung „Bitte füllen Sie dieses Feld aus“ nicht empfohlen, es sei denn, es gibt ein Attribut, das die Aufforderungsmeldung ersetzen kann.
Muster: Ein Ort zum Schreiben regelmäßiger Muster in das Eingabe-Tag. . Das Eingabesteuerelement vom Typ „E-Mail“ oder „URL“ verfügt über integrierte zugehörige reguläre Ausdrücke. Wenn der Wert nicht mit dem regulären Ausdruck übereinstimmt, schlägt die Überprüfung des Formulars fehl und kann nicht gesendet werden. .
Es wird nicht empfohlen, es für Elemente vom Typ E-Mail oder URL zu verwenden, da die Eingabeaufforderungsinformationen und das reguläre Muster festgelegt sind. . Es ist besser, direkt in js umzuschreiben.

Einige Eingabeeinstellungen:
„rangeUnderflow“ begrenzt den Mindestwert der numerischen Steuerung. Geben Sie „type="number" min="0" value="20"
ein rangeOverflow begrenzt den Maximalwert der numerischen Steuerung. Geben Sie den Wert „number“ max="100" value="20"
ein „stepMismatch“ stellt sicher, dass der Eingabewert den Einstellungen „Min“, „Max“ und „Schritt“ entspricht. Legen Sie den maximalen Mindestschritt fest, Eingabetyp = „Zahl“ – min = „0“ – max = „100“ – Schritt „10“ – Wert = „20“
bc5574f69a0cba105bc93bd3dc13c4ec

Das Folgende ist eine kleine Funktion, die von input=number verwendet wird:

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围：使用<input type="number" min="0" max="100"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN 不判断.因为值为空');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
return false;
}
return true;
}

Eigenschaften und Datenliste auflisten:

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<form action="http://localhost/test.php" method="post" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option> 
<option value="1980">1980</option> 
<option value="1990">1990</option> 
</select>
<input type="submit" value="注册" form="register"/>

Regulär: 77c360f9c68e2e9a94541bb951f65f9a

E-Mail:a718424f5f1f8af4fa4f078a1cbbbbfc< ;br />
Adresse:f7c79162c0e524d73d44db095b6a86f8
DATUM:e535f83b2d4da9572ad682811dbb96c4df250b2156c434f3390392d09b1c9563
ZEIT:ecce8baac87750407bd361850fbeb05a MONAT:12424f4308ab1ded8100fa3a813cca1e
Woche:e8ce2c6addb6f4614fb6d38713f2dfca
Nummer: c91b025bc073179e52c284ef5e2f4ed5df250b2156c434f3390392d09b1c9563
Schieberegler798d4ae7d9d52b50caa3abb416a13610
Suche:e0eb08276351b89f6680adeb0e4142b6
Farbe:9f9cb6021db7cc3e125dff1cb7e8877cdf250b2156c434f3390392d09b1c9563
0e9f73baf0273021f27a708f9b53d388

Formular automatisch ausfüllen076402276aae5dbec7f672f8f4e5cc81

<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>

Ausgabeformularausgabe

<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.