Controls in HTML
- HTML Controls are user interface elements used to collect and submit data
- HTML Provides various controls for entering, selecting and transferring data
1.<Text Box
<input type="text">
Use: Enter Single-line text(name, username)
2.Password Box
<input type="Password">
Use: Enter Sensitive data (character are hidden)
3.Number Box
<input type="number">
4.Email Box
<input type="email">
Use :Enter email address(Browser validates format automatically).
5.Radio Button
<input type="radio" name="btn">
Use: Select only one Option(same name attribute is required)
6.Check box
<input type="checkbox">
Use:Select multiple options
7.Drop down
<select>
<option>Select County</option>
<option>India</option>
<option>USA</option>
</select>
8.Button
<button>click me</button>
9.Text area
<textarea row="4" cols="30"> </textarea>
Use:Enter multi-line text(address,comments)
10.Submit Button
<input type="submit" value="Submit">
11.Reset Button
<input type="reset" value="clear">
Use: Clear all form fields
12. File Upload Control
<input type="file">
Use:Upload files(images,documents)
13. Data picker
<input type="date">
Use:Select a data using calendar
14.Label
<label>Name:</label>
<input type="text">
Use: Describes input fields
Introduction to JavaScript
What is Java Script?
JavaScript is a programming language used to make webpages interactive
HTML -->Structure
CSS-->Design
JavaScript-->Behaviour
1. Why JavaScript?
Without JavaScript: Website are static ,No user interaction
With JavaScript: Button clicks, Form validation, Dynamic content ,Alert and messages
2.Using JavaScript in an HTML Page
What does "Using JavaScript in HTML" Mean?
Connecting JavaScript code with a HTML page so that page can react to user actions
Examples of reaction
Button Click
Form Validation
Changing Text or color
Showing messages
Fetching data
There are 3 ways to use JavaScript
1. Inline JavaScript
2.Internal JavaScript
3.External JavaScript(Best practice)
1.Inline JavaScript:
Writing Java Script code directly inside an HTML tag using attributes like onclick, onchange, etc.
<button onclick="alert('hello')">Click </button> --Easy not recommended large proj
What happens?
User clicks the button
JavaScript runs immediately
An alert box is shown
Common JavaScript inline Events
Event When it runs
Onclick When elements is clicked
OnChange When value change
Onkeyup When key is released
Onload When page loads
Onsubmit When form is submited
When click button is called key down, when leave the button is call key up
2. Internal JavaScript
Writing JavaScript code inside the HTML file using the <script>tag(The JavaScript code is not inside HTML tags(like inline JS),but still lives within same HTML page.)
For ex:-
<script>
function buttonclik()
{
alert("Submitted")
}
</script>
3.External JavaScript(Best practice)
Writing JavaScript code in a separate.js file and linking it to an HTML page(HTML and JavaScript live in different files).
Why Is External JavaScript "Best Practice"?
Because it follow Separation of concerns:
HTML -->Structure
CSS -->Design
JavaScript-->Logic
<script scr="script.js"></script>
This makes code: Clean,Reuable,mainrainable,professional
- Comparison :Inline vs internal Vs External
Type Local Best For
Inline Inside HTML tag Small demos
Internal <script> in HTML Learning
External Separate.js fie Real Projects
JavaScript Syntax and variables
( Python 31)
Full stack developer means:
Front-end (html/JS/JQ/CSS)
Backend(Python/Dotnet/Java)
Database(mysql/Sqlserver..)
Websites Types
Statics ( page not change)
Dynamic (static change the data)
Task:
images/download.ipg
Style.css
body {
font-family: Arial;
line-height:1.6;
width:80%;
background-color: #f4f6f8;
margin:30x; padding:25px;
border-radius:60px;
}
main {
font-family: Arial;
line-height:1.6;
width:80%;
background-color: #f4f6f8;
margin:30x; padding:25px;
border-radius:60px;
}
header{
background-color: #2c3e50;
color: white;
padding:20px;
text-align:center;
}
section{
margin-bottom:25px;
}
h1{
background-color: #2c3e50;
padding: 5px;
}
h2{
background-color: #f4f6f8;
border-bottom:2px solid #ddd;
padding: 5px;
}
ul{
margin-left:20px;
}
footer{
text-align:left;
padding:25px;
background-color: #2c3e50;
color:white;
margin:60px; padding: 30px;
border-radius:80px;
}
footer a {
color:#ffd700;
}
nav{
background-color: #2c3e50;
}
.menu{
list-style: none;
margin: 0;
padding:0;
display:flex;
}
.menu li{
margin:0;
}
.menu li a{
display: block;
padding: 14px 20px;
color: white;
text-decoration: none;
font-weight:bold;
}
.menu li a:hover{
background-color:#1a252f;
}
script.js
function buttonclik()
{
alert("Submitted")
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> My First page </title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="index.html">Home page</a></li>
<li><a href="/Student.html">Student</a> </li>
</nav>
<header>
<section> <h1> Learning SQL </h1><img src="images/download.jpg" style="height:80px; width:150px;"></section>
</header>
<main>
<section>
SQL is a standard language for storing, manipulating and retrieving data in databases.
</section>
<section>
<p>
<h2>SQL Tutorial</h2>
<h2>Our SQL tutorial will teach you how to use SQL in: </h2>
<ul">
<li>MySQL</li>
<li>SQL Server</li>
<li>MS Access</li>
<li>Oracle</li>
<li>Sybase</li>
<li>Informix</li>
<li>Postgres</li>
</ul>
</p>
</section>
<section>
<h2> SQL Exercises </h2>
Many chapters in this tutorial end with an exercise where you can check your level of knowledge.
<p>
Which SQL statement is used to select all records from a table named 'Customers'?
<br>
<ul>
<li> SELECT * FROM Customers; </li>
<li> SELECT ALL FROM Customers; </li>
<li> SELECT FROM Customers; </li>
</ul>
</p>
</section>
<footer>
<p>Regards,</p>
<p><a href="https://oracleask.blogspot.com/2026/01/python-39.html" target="_blank">Please Visit our blog</a> </p>
</footer>
</main>
</body>
</html>
student.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> My First page </title>
<link rel="Stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li><a href="index.html">Home page</a></li>
<li><a href="/Student.html">Student</a> </li>
</nav>
<header>
<!-- <h1> Learning SQL </h1>-->
<section> <h1> Learning SQL </h1><a href="/index.html" ><img src="images/download.jpg" style="height:80px; width:150px;"></a></section>
</header>
<main style="background-color: bisque;">
<form>
<table>
<tr><td><label>Student Name:</label></td><td><input type="text" placeholder="StudentName"></td></tr>
<tr><td><label>Mobile Number</label></td><td><input type="number" placeholder="Mobileno"></td></tr>
<tr><td><label>Email ID:</label></td><td><input type="email" placeholder="Emailid"></td></tr>
<tr><td><label>DOB:</label></td><td><input type="date"></td></tr>
<tr><td><label>Location:</label></td><td><input type="text" placeholder="Location"></td></tr>
<tr><td>Gender:</td><td><input type="radio" name="gen">Male<input type="radio" name="gen">FeMale<input type="radio" name="gen">Others</td></tr>
<tr><td>Skills:</td><td><input type="checkbox" name="gen">AWS<input type="checkbox" name="gen">Java<input type="checkbox" name="gen">DotNet</td></tr>
<tr><td>Country:</td>
<td><select onchange="alert('item selected')">
<option>select Country</option>
<option>India</option>
<option>USA</option>
<option>UK</option>
<option>Canda</option>
</select></td></tr>
<tr><td>Student image</td> <td><input type="file" > </td> </tr>
<tr><td>Message:</td><td><textarea></textarea></td>
<tr Style="text-align:center;"></td><td colspan="2"><button onclick="buttonclik()">Submit</button></td></tr>
</table>
</form>
</main>
<footer>
<p>Regards,</p>
<p><a href="https://oracleask.blogspot.com/2026/01/python-39.html" target="_blank">Please Visit our blog</a> </p>
</footer>
</body>
</html>
Output:
--Thanks
No comments:
Post a Comment