Common forms and input boxes summary

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/qq_38543537/article/details/86531736

Input input box

<input type="text" placeholder="文本输入">
<input type="number" placeholder="数字输入">
<input type="password" placeholder="密码输入">
<input type="radio" placeholder="单选">
<input type="checkbox" placeholder="多选">
<input type="email" placeholder="邮箱地址">
<input type="submit" placeholder="提交按钮">
<textarea rows="5" cols="10">多文本输入框</textarea>

input of the type of property:

text: text entry box

number: number input box

password: password input box

radio: radio input box

checkbox: multiple choice input box

email: E-mail input box

submit: submit button

textarea attributes:

Number of visible rows: rows

cols: number of columns visible

JS real-time input box data binding

<input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" value="" />

<script type="text/JavaScript">
    function aa(e){
        console.log(e);
        var bbb = document.getElementById('a').value;
        console.log(bbb);
    }
</script>

Print Results:

Get the value of the selected input radio

<div>
        <label for="aaa"><input id="aaa" name="bedStatus" type="radio" onclick="sub(this.value)" value="1">选项1</label>
        <label for="bbb"><input id="bbb" name="bedStatus" type="radio" onclick="sub(this.value)" value="2">选项2</label>
        <label for="ccc"><input id="ccc" name="bedStatus" type="radio" onclick="sub(this.value)" value="3">选项3</label>
</div>

function sub(e) {
    console.log(e);
}

Print Results: