Everything 4 PC: form elements

March 28, 2015

Restrict the users to type certain number of characters in a HTML Text Box

In your web development career every one frequently come across a situation where you need to restrict the users to enter a certain number characters in your text boxes or text areas. Again the best example is when you are taking persons phone number. You can accomplish this task in so many ways either with JavaScript or HTML or with other libraries but, the easy way is to use just a simple HTML attribute that's what we will see in this tutorial.

<input type="text" maxlength="10" />

There are other useful attributes to be discussed. Let's see about disabled attribute.

<input type="text" value="Hello" disabled />

disabled is used to make the user restrict from changing the value from the text box for example country code for the particular country is fixed. You can also use this disabled attribute in side buttons and you can control it with JavaScript for certain functionalities.

<input type="text" value="Hello" required/>

Required attribute is used to tell the user it is compulsory to fill the text box before submitting the form.

<input type="text" value="Hello" placeholder="Enter some value"/>

Placeholder is used to give the users a hint about what type of value to be filled inside a particular text box.

So, this is it for this tutorial. There are many attributes that can be used inside form elements I suggest you to explore them. If any queries feel free to post a comment below or mail me @ ething4pc@gmail.com

Create Awesome Signup Form with simple CSS

Form are the main components in any websites. Forms are interface between the user and the server. If there are no forms then there is no interaction between the user and the server. There are a plenty of form element types in HTML. Here I will take a few of them and create a simple Sign up form. So let's get started.

formelements.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="formelements.css">
</head>
<body>
<div id="container">

<form method="post" action="formelements.html">
<label>SignUp</label><br><br>
<input type="text" placeholder="Username" class="textBox"/><br>
<input type="email" placeholder="Email" class="textBox" /><br>
<input type="password" placeholder="Password" class="textBox" /><br><br>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Male</span>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Female</span><br>
<input type="checkbox" class="checkBox" /> <span class="outsideText">I agree to the terms and
conditions of this website. This is some dummy lorem Ipsum text.</span><br>
<input type="submit" value="Sign up" id="submitBtn" />
</form>

</div>

</body>

</html>

formelements.css
form {
width:500px;
padding:8px;
border:1px solid #cccccc;
}
label {
font-size:24px;
font-family:calibri;
color:red;
text-shadow:2px 2px 1px #cccccc;
padding:6px;
font-weight:700;
}
.textBox {
width:320px;
padding:10px;
font-size:18px;
font-family:calibri;
outline:none;
border:4px solid #00bbaf;

}
.outsideText {
font-size:18px;
font-family:calibri;
}
#submitBtn {
width:160px;
padding:6px;
background:orange;
border:1px solid orange;
color:#ffffff;
font-size:18px;
font-family:calibri;
margin-top:6px;

}

The form looks in this way

Here due to image resolution the image looks pretty much dim. Trust me if you copy and paste the code and check in your screens it looks more pretty, Again play with all the different styles above, try changing the values. If any doubts don't hesitate to comment below. I am always ready to clear your queries.

Pages

March 28, 2015

Restrict the users to type certain number of characters in a HTML Text Box

Create Awesome Signup Form with simple CSS