Adding styles to Forms

by vigneshchennai74 Updated: Apr 11, 2023

Guide Kit

"Adding Styles to Form" refers to using CSS to modify the appearance and layout of an HTML form. The styling can include the following:

Changing the size and color of form elements.
Adjusting the spacing between form elements.
Adding custom styles to the submit button.

Adding styles to a form can make it more visually appealing and user-friendly. By customizing the appearance of the form elements, you can make it easier for users. It will help them understand what information they need to provide and how to interact with the form. Also, using CSS to adjust the form's layout can make it more responsive and adaptable to different screen sizes and device types.

Adding styles to a form can help improve the user experience. It will make users more likely to complete the form and submit their information.

Preview of the output that you will get on running this code from your IDE.

Code

In this solution we have used css styling in html

CSS - Styling a form

HTMLLines of Code : 75License : Strong Copyleft (CC BY-SA 4.0)

form {
  height: 200px;
  width: 400px;
  margin-right: 50px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
}

div.row {
  display: flex;
  width: 100%;
}

div.row input {
  margin-left: 5px;
}
div.row input:first-child {
  margin-left: 0;
}

input[type=text],
input[type=email] {
  background: #E8E8E8;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  padding: 6px 12px;
}

textarea {
  resize: none;
  font-size: 10px;
  background: #E8E8E8;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 6px 12px;
  margin-bottom: 5px;
}

input[type=submit] {
  background: #1ba4dd;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  width: 100%;
  padding: 8px 0;
}

input[type=submit]:hover {
  background: #00bfff;
}
<div class="six columns">
  <form>
    <fieldset>
      <div class="row">
        <input name="name" type="text" required placeholder="NAME">
        <input name="email" type="email" required placeholder="EMAIL">
      </div>
      <input name="subject" type="text" placeholder="SUBJECT">
      <textarea rows="8" placeholder="MESSAGE..."></textarea>
    </fieldset>
    <input type="submit" value="SUBMIT">
  </form>
</div>

Instructions

Download and install VS Code on your desktop.
Open VS Code and create a new file in the editor.
Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).
Paste the code into your file in VS Code.
Add a <style> tag at the beginning of the CSS code, before line 1.
Add a closing </style> tag at the end of the CSS code, after line 63.
Save the file with a meaningful name and the appropriate file extension (.html for HTML)
To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.

I hope you found this useful. I have added the version information in the following sections.

I found this code snippet by searching for "css-styling a form "in Kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

Visual Studio Code Version 1.76.0

Adding styles to a form can help make it more visually appealing and user-friendly. This process also facilities an easy to use, hassle free method to create a hands-on working version of code helps to add style to a from in html.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Adding styles to Forms

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow