<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 id="heading">Hello, world!</h1>
<form>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" value="[email protected]">
<span id="emailHelp"><small class="form-text text-muted">We'll never share your email with anyone else.</small></span>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary" id="showPassword">Show</button>
</div>
<input type="password" class="form-control" id="password" placeholderr="******">
</div>
</div>
<div class="form-group">
<label>User Type</label>
<select class="form-control" id="userType">
<option value="">Select</option>
<option value="normal">Normal</option>
<option value="admin" data-content="I am Admin" selected>Admin</option>
</select>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" value="1" id="check">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary" id="btn">Submit</button>
</form>
<hr>
<p>Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
</div>
</body>
</html>$(document).ready(function(){
var pContentGet = $('p:first').text(); //get content
var pContentSet = $('p').text('Please fill the form frist!'); //set content
console.log(pContentGet);
var htmlContentGet = $('#emailHelp').html();
var htmlContentSet = $('#emailHelp').html('<small class="text-danger">Please enter a valid Email ID.</small>');
console.log(htmlContentGet);
var emailGet = $('#email').val();
var emailSet = $('#email').val('[email protected]');
console.log(emailGet);
$('#showPassword').on("click",function(){
$('#password').attr('type','text')
})
});
External CSS
This Pen doesn't use any external CSS resources.