Create Form with table in html ( Text Field,Radio Button,Drop Down,Check Box )
Create Form with table in html ( using Text Field,Radio Button,Drop Down,Check Box,Submit Button)
<html>
</head>
// for java script code
</head>
<title>Regitration Page in HTML</title>
<body>
<form method="post" action="nextpage.html" name="myform">
<table border="10px" width="100%">
<tr><td colspan="3"> <marquee behavior="alternate" ><b> <u> My Regitration Page</u></b> </marquee></td></tr>
// code for text field in html
<tr><td>Name</td><td><input type="text" id="name"></td><td></td></tr>
// code for radio button in html
<tr><td>Gender</td><td>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female</td>
<td></td></tr>
<tr><td>FatherName</td><td><input type="text" id="fathername"></td><td></td></tr>
<tr><td>EmailId</td><td><input type="text" id="emailid"></td><td></td></tr>
// code for text field (password) in html
<tr><td>Password</td><td><input type="password" id="pass"></td><td></td></tr>
<tr><td>ConfirmPassword</td><td><input type="password" id="cpass"></td><td></td></tr>
// code for Check Box in html
<tr><td>Qulification</td><td><input type="checkbox" name="qulification"value="High School">High School
<input type="checkbox" name="qulification" value="Intermidiate">Intermidiate
<input type="checkbox" name="qulification" value="Graduation">Graduation
<input type="checkbox" name="qulification" value="Post Graduation">Post Graduation</td><td></td></tr>
// code for drop down list for four item in html
<tr><td>Current City</td><td> <select name="city" id="city" width="500px">
<option>Select</option>
<option>Delhi</option>
<option>Noida</option>
<option>Varanasi</option>
<option>Ghaziabad</option>
</select></td><td></td></tr>
// code for submit button in html
<tr><td><input type="submit" name="submit" value="submit" onClick="f1()" /></td><td></td><td></td></tr>
</table>
</form>>
</body>
</html>
What is CSS,Type of Css,Inline,Internal,External Style Sheet
CSS (Cascading Style Sheets)
|
What is CSS?
CSS stands for cascading style sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one.
Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.
Types of CSS: There are three type Style sheets
a. Inline Styles
b. Internal Style Sheet
c. External Style Sheet
Inline Styles: An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
For Example:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
Internal Style Sheet: An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color: green}
p {margin-left: 20px}
body {background-image: url ("images/kushtiwari.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
External Style Sheet: An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link > tag. The <link > tag goes inside the head section:
<head >
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Other CSS Questions
Question: Style Sheets Can Save a Lot of Work
Answer: Enforcing data integrity ensures the quality of the data in the database. For example, if an employee is entered with an employee_id value of 123, the database should not allow another employee to have an ID with the same value. If you have an employee_rating column intended to have values ranging from 1 to 5, the database should not accept a value of 6. If the table has a dept_id column that stores the department number for the employee, the database should allow only values that are valid for the department numbers in the company. Two important steps in planning tables are to identify valid values for a column and to decide how to enforce the integrity of the data in the column. Data integrity falls into these categories.
Answer: The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.
Question: CSS purpose and Used for?
Answer: CSS is a language, separate from HTML or XHTML CSS used to specify the layout or formatting properties of HTML elements From a single CSS file you can control an entire sites:
font type ,font and element color ,padding ,margins ,and element positioning CSS allows developers to separate style (look, appearance, colors, fonts, layout) from the pages structure.
Question: What is the CSS Web Template?
Answer: "CSS Web Template" is a website design created using Cascading Style Sheets (CSS) technology. Cascading style sheets provide web developers an easy way to format and to style web pages. CSS will be used even more because it is seen the same way by all browsers, making it the best option during the browser wars.
Create Menu In Asp.Net with help Css...................
Creating Menu in Asp.Net with help CSS.....................
Take Default.aspx in Asp.Net and create menu ...........
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Cetpa Info Tech Pvt Lmd </title>
<%--styleSheet.css impliment in this page --%>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<div class="d1">
<marquee behavior="alternate">Cetpa Info Tech Pvt Lmd</marquee>
</div>
<div>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Servies
<ul>
<li><a href="Defaultramesh.aspx" >Training</a></li>
<li>Development</li>
</ul>
</li>
<li>Gallary</li>
</div>
<div>
<div class="d2">
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333">
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
<TextBoxStyle Font-Size="0.8em" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em"
ForeColor="White" />
</asp:Login>
</div>
<div class="d3">
</div>
</div>
</form>
</body>
</html>
/* Frist take StyleSheet.css for difine ....................................*/
body
{
/*background-color:#CBE56F;*/
}
.d1
{
width:auto;
height:30px;
color:Red;
background-color:#1784D4;
text-align:center;
letter-spacing:1px;
font-size:x-large;
font-style:italic;
padding-top:15px;
font-weight:bold;
padding-bottom:10px;
}
.d1:hover
{
color:Green;
background-color:Yellow;
text-align:center;
letter-spacing:15px;
}
h1
{
color:Red;
background-color:Aqua;
text-align:center;
letter-spacing:1px;
}
h1:hover
{
color:Green;
background-color:Yellow;
text-align:center;
letter-spacing:5px;
}
ul
{
width:100%;
list-style:none;
margin:0px;
padding:0px;
}
ul li
{
width:19.75%;
float:left;
font-size:larger;
font-style:italic;
text-align:center;
font-weight:bold;
color:blue;
margin:0px;
padding-top:5px;
height:30px;
display:inline;
text-decoration:none;
background-color:Red;
border:5px,Solid white,black;
border-color: #000;
border-width: 3px 3px 3px 0;
border-style: solid;
/*padding:2px 2px 2px 2px;
margin-left:15px;
margin:10px 23px 34px 67px;
padding:10px 10px 10px 10px;*/
}
ul li:hover
{
background-color:Black;
color:Green;
border:2px ,soli white;
}
ul li ul
{
display:none;
}
ul li:hover ul
{
display:block;
}
ul li ul li
{
width:100%;
text-align:center;
top:10px;
position:relative;
}
ul li ul li:hover
{
background-color:Black;
width:100%;
text-align:center;
top:10px;
position:relative;
}
.d2
{
width:22%;
float:left;
height:150px;
}
.d3
{
width:78%;
height:5%;
create validation on TextBox Field,CheckBox,DropDown using Java Script
How to create validation on TextBox Field,CheckBox,DropDown using JavaScript
**************************************************************
<html>
<head>
<script type="text/javascript">
function val()
{
//alert("kush");
var un = document.forms['myform']['username'].value;
var fn = document.forms['myform']['fathername'].value;
var e1 = document.forms['myform']['email'].value;
var p = document.forms['myform']['password'].value;
var cp = document.forms['myform']['cpassword'].value;
var cs = document.forms['myform']['city'].value;
if (un == null || un == "") {
alert('Please enter user name');
return false;
}
if (fn == null || fn == "") {
alert('Please enter father name');
return false;
}
if (e1 == null || e1 == "") {
alert('Please enter email name');
return false;
}
if (p == null || p == "") {
alert('please enter password');
return false;
}
if (cp == null || cp == "") {
alert('please enter confirm password');
return false;
}
if (cs == null || cs == "") {
alert('Please Select City');
return false;
}
//coding for how to validate checkbox List in Java Script............
var chks = document.getElementsByName('qulification[]');
var checkCount = 0;
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
checkCount++;
}
}
if (checkCount < 2) {
alert("Please select at least two.");
return false;
}
//coding for how to compare validate password and Confirm Password in Java Script............
if (p != cp) {
alert("Password and Confirm Password is not match");
}
return true;
}
</script>
</head>
<body>
<form action="tiwari.html" method="post" name="myform" onsubmit="return val()">
<table border="5px" width="100%">
<tr><td>Name:</td><td><input type="text" name="username"></td><td></td></tr>
<tr><td>Father Name</td><td><input type="text" name="fathername"></td><td></td></tr>
<tr><td>EmailId</td><td><input type="text" name="email"></td><td></td></tr>
<tr><td>Password</td><td><input type="password" name="password"></td><td></td></tr>
<tr><td>Confirm Password</td><td><input type="password" name="cpassword"></td><td></td></tr>
<tr><td>Qulification</td><td>
<input type="checkbox" name="qulification[]" value="High School">High School
<input type="checkbox" name="qulification[]" value="Intermidiate">Intermidiate
<input type="checkbox" name="qulification[]" value="Graduation">Graduation
<input type="checkbox" name="qulification[]" value="Post Graduation">Post Graduation
</td><td></td></tr>
<tr><td>Current City</td><td><select name="city" id="" width="500px">
<option value="">Select</option>
<option value="Delhi">Delhi</option>
<option value="Noida">Noida</option>
<option value="Varanasi">Varanasi</option>
<option value="Ghaziabd">Ghaziabad</option>
</select></td><td></td></tr>
<tr><td><input type="submit" name="sub"></td><td></td><td></td></tr>
</table>
</form>
</body>
</html>
Preview Image in File Upload with Java Script and html.
code for Preview Image in File Upload with Java Script and html.
<html>
<head>
<title>Preview Image in File Upload with Java Script</title>
<!--code for Preview Image in File Upload in Java Script.......-->
<script type="text/javascript" language="javascript">
function ImagePreview() {
OfReader = new FileReader();
OfReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
OfReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
</script>
</head>
<body>
<table width="100%">
<tr><td>Name</td><td><input type="text" id="name" name="name"></td></tr>
<tr><td>User Image</td><td>
<input type="file" id="uploadImage" name="myPhoto" onchange="ImagePreview();" />
</td></tr>
<tr><td></td><td> <Image id="uploadPreview" style="width: 75px; height:75px;"/></td></tr>
</table>
</body>
</html>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment