Press "Enter" to skip to content

HTML User Defined Background Color using Text box, List box and Input box with JavaScript and CSS

Post Abstraction: User Defined Background Color and gradient color using Text box, List Item and Button in HTML using CSS

These are simple and funny JavaScript codes. Using these codes you can change the background color of your web page.

Usually the background color of a webpage is static; it is set by web site owner or web designer. But we can allow users to select own background color for your webpage. So users can visit your site with their own famous color.

Normal and default method to set background color in a HTML page:

<html>
<title> Background Colors </title>
<body bgcolor = "red">
<h1> www.yourowncodes.com </h1>
</body>
<title> Background Colors </title>
<body onload = "changecolor()">
<h1> www.infolet.org </h1>
</body>
<script type = "text/javascript">
function changecolor()
{
document.bgColor = "red";
}
</script>
</html>

Here background color is red. You can choose any color instead of ‘red’.

If you allow users to select the background color of your webpage, then we have to select one of the following controls.

Output:

HTML, CSS change background color using text field

Using Text box:

Here a text box will be there. User will type a valid name of a color or html color code. Then user can change the background color by a simple button click.

Here is the code:

<html>
<title> Background Colors </title>
<body>
<h1> <b> www.yourowncodes.com </b> </h1>
<form name="myform">
<input type="text" name="colorname">
<input type = "button" value = "Change color" onclick = "changecolor()">
</form>
</body>

<script type = "text/javascript">
function changecolor()
{
var clr = document.myform.colorname.value;
document.bgColor = clr;
}
</script>
</html>


Sample Output:

HTML, CSS change background color using text field

You can use HTML color codes instead of colors’ name

Using List box

Here a list box contains many colors, if user select a color, then background color will change to that color.
Let’s see the colors of rainbow, VIBGYOR

Here is the code:

<html>
<title> Background Colors</title>
<body>
<h1> <b> www.yourowncodes.com </b> </h1>
<form name="myform">
<select name = "list" size="10" onclick="changecolor()" >
  <option value = "violet"> Violet </option>
  <option value = "indigo"> Indigo </option>
  <option value = "blue"> Blue </option>
  <option value = "green"> Green </option>
  <option value = "indigo"> Indigo </option>
  <option value = "yellow"> Yellow </option>
  <option value = "orange"> Orange </option>
  <option value = "red"> Red </option>
</select>
</form>
</body>

<script type="text/javascript">
function changecolor()
{var clr = document.myform.list.value;
document.bgColor=clr;
}
</script>
</html>

Sample Output:

Using Input box

Input box is small box like message box; where users can type the name of color or html color codes that he want to set the background color. When he clicks on “OK”, then typed color will set as the background color.

Here is the code:

<html>
<title> Background Colors</title>
<body>
<h1> <b> www.yourowncodes.com </b> </h1>
<form name = "myform">
<input type = "button" value="Click to change color" onclick="changecolor()">
</form>
</body>

<script type="text/javascript">
function changecolor()
{
var clr = prompt("Enter the color","");
document.bgColor = clr;
}
 </script>
</html>

Sample Output:

You can also change color using radio buttons, checkboxes, combo boxes etc.

Gradient Color

If you want to set two colors as gradient, then you have to add two text boxes to type two colors.

Here is the code:

<html>
<title> Background Colors</title>
<body id = "une">
<h1> <b> www.yourowncodes.com </b> </h1>
<form name = "myform">
<input type = "text" name="colorname">
<input type = "text" name="colorname2">
<input type = "button" value = "Change color" onclick="changecolor2()">
</form>
</body>

<script type="text/javascript">
function changecolor2()
{
var clr = document.myform.colorname.value;var clr2 = document.myform.colorname2.value;
var temp = document.getElementById("une");
var changeclr = "linear, 20 50, 50 10, color-stop(0, " + clr + "), color-stop(100, " + clr2 + ")";
temp.style.backgroundImage = "-webkit-gradient(" + changeclr + ")";
}
</script>
</html>

Sample Output:

Gradient background color in html using css

Enjoy with these codes… 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *