JavaScript menemui beberapa atribut bentuk kemahiran HTML5_javascript

atribut input:
pemegang tempat: Nilai lalai kotak input, menunjukkan teks deskriptif atau maklumat segera kepada pengguna

autolengkap: Nilai dihidupkan dan dimatikan. . "hidup" bermakna apabila medan diisi dan diserahkan dan kemudian dikembalikan ke halaman, maklumat yang dimasukkan sebelum ini akan dipaparkan apabila masuk semula. off bermaksud ditutup, termasuk keselamatan data input pengguna. Lalai dihidupkan
autofokus: Tetapkan input untuk mendapatkan fokus secara automatik apabila halaman dimuatkan. Perhatikan bahawa halaman hanya boleh menetapkan atribut ini untuk satu input.
Ciri senarai dan senarai data: Tambahkan senarai lungsur ke kotak input melalui senarai. . Ia bersamaan dengan fungsi "auto-lengkap" yang dilaksanakan dalam js, tetapi ia tidak boleh melakukan pertanyaan kabur
Jika terdapat dua nilai dalam senarai data: "a34343" dan "24234", pengguna menjangkakan bahawa kedua-dua nilai akan muncul selepas memasukkan 3, tetapi sebenarnya tiada satu pun daripada mereka akan muncul.
Ia memerlukan padanan lengkap Contohnya, jika anda memasukkan a, drop-down a34343 akan muncul, dan kemudian jika anda memasukkan 4, nilai drop-down akan hilang.

diperlukan: Elemen ini mesti diisi sebelum borang diserahkan, iaitu, ia tidak boleh kosong. Tidak disyorkan kerana mesej gesaan 'Sila isi medan ini' melainkan terdapat atribut yang boleh menggantikan mesej gesaan.
Corak: Tempat untuk menulis corak biasa dalam teg input. . Kawalan input yang jenisnya ialah e-mel atau url mempunyai ungkapan biasa berkaitan terbina dalam Jika nilai tidak sepadan dengan ungkapan biasa, borang tersebut akan gagal dalam pengesahan dan tidak boleh diserahkan. .
Ia tidak disyorkan untuk menggunakannya untuk elemen yang jenisnya ialah e-mel atau url, kerana maklumat segera telah ditetapkan dan corak biasa telah ditetapkan. . Adalah lebih baik untuk menulis semula secara langsung dalam js.

Beberapa tetapan input:
rangeUnderflow mengehadkan nilai minimum bagi kawalan berangka, input type="number" min="0" value="20"
rangeOverflow mengehadkan nilai maksimum kawalan berangka Tetapkan maks, input type="number" max="100" value="20"
stepMismatch memastikan bahawa nilai input mematuhi tetapan min, maks dan langkah Tetapkan langkah min maks, input type="number" min="0" max="100" step="10" value="20"<.> 1f3459e573bfe172a38ab8a53355585e

Berikut ialah fungsi kecil yang digunakan oleh input=number:

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;
}

senarai sifat dan senarai data:

<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"/>

Biasa: 77c360f9c68e2e9a94541bb951f65f9a

E-mel:beab402c3d01184ac52a120b9ae5b4b0< ; br />

Alamat:f7c79162c0e524d73d44db095b6a86f8
TARIKH:e535f83b2d4da9572ad682811dbb96c4df250b2156c434f3390392d09b1c9563
MASA:ecce8baac87750407bd361850fbeb05a
BULAN:12424f4308ab1ded8100fa3a813cca1e
Minggu:e8ce2c6addb6f4614fb6d38713f2dfca
Nombor: c91b025bc073179e52c284ef5e2f4ed5df250b2156c434f3390392d09b1c9563
Slider798d4ae7d9d52b50caa3abb416a13610
Carian:e0eb08276351b89f6680adeb0e4142b6
Warna:9f9cb6021db7cc3e125dff1cb7e8877cdf250b2156c434f3390392d09b1c9563
0e9f73baf0273021f27a708f9b53d388

Borang autolengkap076402276aae5dbec7f672f8f4e5cc81

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

Output borang output

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.