常用表单及输入框总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38543537/article/details/86531736

Input输入框

<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的type的属性：

text：文本输入框

number：数字输入框

password：密码输入框

radio：单选输入框

checkbox：多选输入框

email：邮箱输入框

submit：提交按钮

textarea属性：

rows：可见的行数

cols：可见的列数

JS输入框数据实时绑定

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

打印结果：

input单选获取所选的值

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

打印结果：