Scribd
Upload
44 views

CSS Lec-17 HTML Controls (Part-A) .07becfb

The document discusses various HTML form controls including input, button, submit, reset, text, password, checkbox, radio. It provides examples to demonstrate each control, describing their syntax and usage. Key points covered include the different input types, evaluating checkbox selections, and ensuring only one radio button can be selected from a group.

Uploaded by

069 Umesh Chaudhari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

CSS Lec-17 HTML Controls (Part-A) .07becfb

The document discusses various HTML form controls including input, button, submit, reset, text, password, checkbox, radio. It provides examples to demonstrate each control, describing their syntax and usage. Key points covered include the different input types, evaluating checkbox selections, and ensuring only one radio button can be selected from a group.

Uploaded by

069 Umesh Chaudhari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

CSS Lecture-17
Topic: HTML Controls (Part-A)

HTML form elements:

A) <input>
 This tag defined an input control. It specifies an input field where user can
enter data.

 Syntax:
<input type="" name="" value="">

 Attributes of input tag:


type : Specifies the type <input> element to display it may be button,
text, checkbox etc.
name: Name of input element
value: Specifies the value of an <input> element

 Following are the different types of input controls


1) button: Creates push button

2) submit: Defines a button for submitting form data to a form-handler.

3) reset: Defines a reset button that will reset all form values to their
default values

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

For Example: (button.html)


<html>
<body>
<form>
User Name: <input id="t1" type="text" name="user" >
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok"
value = "Validate" onclick="validate()" />

<input type = "image" name = "imagebutton"


src = "images/logo.png" onclick="alert('Image button clicked')" />

</form>
</body>
<script>
function validate(){
if(document.getElementById("t1").value=="")
alert("Enter name ");
else
alert("Ok");
}
</script>
</html>

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

4) text: It is use to enter single line of text.


For Example (add.html)
<html>
<body>
Number1: <input type="text" id="t1" name="no1"><br><br>
Number1: <input type="text" id="t2" name="no2"><br><br>
Addition=<input type="text" disabled id="t3" > <br><br>

<input type="button" value="Addition" onclick="compute()">


</body>
<script>
function compute(){
var x =parseInt(document.getElementById("t1").value);
var y =parseInt(document.getElementById("t2").value);

document.getElementById("t3").value=x+y;

}
</script>
</html>

5) password: It indicates that the field is for typing a password.


Fox Example: (password.html)
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

6) Checkbox :
 It is use to select one or more options of a limited number of choices.
 The <input type="checkbox"> defines a checkbox.
 The checkbox is shown as a square box that is ticked (checked) when
activated.

Evaluating Check Box Selections:


 A check box has only two states (checked or unchecked) and is independent
of the state of other check boxes in the form.
 In side Javascript by using the “checked” property of check box, we can find
out whether it is selected or not.
 Checked is the boolean property of check box. It is true if check box is
selected otherwise false.

For Example (check.html)


<html>
<body>
<form action="page.html">
Select Programming Languages<br>

<input type="checkbox" id="ch1" name="Prog" value="C">C


<input type="checkbox" id="ch2" name="Prog" value="C++">C++
<input type="checkbox" id="ch3" name="Prog" value="Java">Java
<input type="checkbox" id="ch4" name="Prog" value="Python">Pyt
hon
<input type="button" onclick="check()" value="Click" ><br>
<input type="submit">

</form>
</body>
<script>
function check(){
var str="Selected Languages are ";
var ch = document.getElementsByName("Prog");
for(var i=0;i<ch.length;i++)
if(ch[i].checked)
str = str+ch[i].value+" ";
alert(str);
}
</script>
</html>

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

7) Radio:
 It is use to select only one option from limited number of choices.
 A radio button is created by using input tag with the type=”radio”.

Fox Example (Radio.html)


<html>
<body>
<form action="page.html">

Gender Group: <br>


<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<br><br>
College Group: <br>
<input type="radio" name="college" value="GP">GP
<input type="radio" name="college" value="Raisoni">Raisoni
<input type="radio" name="college" value="Deokar">Deokar
<br><br>
<input type="submit">
</form>
</body>
</html>

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260

You might also like