Speed up development with full-stack environments for every branch.

Learn More

How to create form using jQuery UI

20811 Runs 50334 Views 20373 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
	<title>How to create form using jQuery UI</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css" media="screen" rel="stylesheet" type="text/css">
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="lib/jquery.ui.core.js"></script>
	<script type="text/javascript" src="lib/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="jquery-ui-form.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(function()
		{
			$("form").form();
		});
	</script>
</head>
<body>
	<div id="container">
		<h1>Create form using jQuery UI</h1>
		<form action="" method="post" id="customtheme">
			<p>
				<label for="username">Username</label>
				<input type="text" name="username" id="username" />
			</p>
			
			<p>
				<label for="password">Password</label>
				<input type="text" name="password" id="password" />
			</p>

			<p>
				<label for="email">Email</label>
				<input type="text" name="email" id="email" />
			</p>
			
			<p>
				<label for="gender">Gender</label>
				<select name="gender" id="gender">
					<option value="">--select--</option>
					<option value="male">male</option>
					<option value="female">female</option>
				</select>
			</p>

			<p>
				<label for="date">Birth Date</label>
				<input type="text" class="date" id="date" name="date" />
			</p>
			
			<p>
				<label for="active">Active</label>
				<input type="radio" name="active" title="Active"/>Active
				<input type="radio" name="active" title="InActive"/>InActive
			</p>
			
			<p>
				<label for="description" style="vertical-align: top;">Description</label>
				<textarea name="description" id="description" cols="30" rows="10"></textarea>
			</p>
			
			<p>
				<input type="button" name="submit" value="Submit" id="submitbutton" onClick="alert('Submitted.');"/>
			</p>
		</form>
	</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).