input框的一系列操作(输入框必填*号,验证单选框为必选,默认选中单选按钮,点击禁用表单输入域,输入框变为只读)

例① ：输入框必填，用*号提示

<p class="form-group">
    <label for="author">姓名</label> <span class="required" style="color:red">*</span>
    <br>
    <input type="text" id="author" name="author" required="required" size="15" class="form-text">
</p>

页面效果：

例②：javascript 验证单选框为必选

<form name="from1">
    <p>请选择你的性别</p>
    <input type="radio" id="male" name="sex" value="1">男
    <input type="radio" id="female" name="sex" value="2">女
    <br />
    <button type="button" onclick="check();">确定</button>
</form>
<script type="text/javascript">
    function check() {
        if (!document.getElementById("male").checked && !document.getElementById("female").checked) {
            alert("必须选择性别！")
            return false;
        }
    }
</script>

页面效果：

例③：javascript 根据后台的值默认选中单选按钮

<form id="form1">
    <input type="radio" name="sex" value="1" />男
    <input type="radio" name="sex" value="2" />女
</form>
<script>
    var sex = document.getElementsByName('sex');
    for (var i = 0; i < sex.length; i++) {
        if (sex[i].value == '1') {
            sex[i].checked = 'checked';
        }
    }
</script>

页面效果：

例④：点击禁用表单输入域

首先在head里引入angular.js

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

body里的代码：

点击这里禁用所有表单输入域:
<input type="checkbox" ng-model="a">
<br><br>
<input type="text" ng-disabled="a">
<input type="radio" ng-disabled="a">
<select ng-disabled="a">
    <option> Female</option>
    <option>Male</option>
</select>

<script>
    var aa = document.querySelector('input');
    console.log();
</script>

页面效果：

例⑤：输入框变为只读

首先在head里引入jquery.js

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

body里的代码：

<div id="aaa" style="height: 20px;">
    <input type="text">
    <input type="text">
    <input type="text">
</div>
<script>
    $('#aaa input').attr('disabled',true); // 直接变暗，只读的视觉效果很好.
    // $('#aaa input').attr('readonly',true); // 无法输入任何内容，但是只读的视觉效果不明显       
</script>

页面效果：
disbaled出现的效果：

readonly出现的效果：