html-form.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Form</title>
<meta charset="utf-8">
<meta name="Keywords" content="HTML,CSS,JavaScript">
<meta name="Description" content="This is desciption">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>HTML Form</h1>
<hr>
<form method="post" action="action_page.php?aa=sss">
First name:<br>
<input type="text" name="firstname" value="Petcharaporn.p">
<br>
Last name:<br>
<input type="text" name="lastname" value="Petchkeaw">
<br><br>
<input type="radio" name="sex" value="male" >Male
<br>
<input type="radio" name="sex" value="female" checked>Female
<br><br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" id="have-car" name="vehicle2" value="Car"> I have a car
<br><br>
<select id="car-brand" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
<input type="submit">
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<button type="submit">Send</button>
</form>
</body>
</html>
------------
myscript.js
$(function() {
$('#car-brand').hide();
$('#have-car').click(function()
{
if($(this).is(':checked')){
$('#car-brand').show();
}
else{
$('#car-brand').hide();
}
});
});
//run โปรแกรม checkbox Volvo หาย
//เมื่อ click I have car
// Volvo จะโผล่ออกมา
----------------------------------
myscript.js
$(function() {
$('input[name=firstname]').val('Meow'); //บังคับ set ค่าลงใน input
$('input[name=lastname]').val('Petchkeow'); //บังคับ set ค่าลงใน input
$('#car-brand').hide();
$('#have-car').click(function()
{
if($(this).is(':checked')){
$('#car-brand').show();
}
else{
$('#car-brand').hide();
}
});
});
รูปที่ 18