askvity

How to Add Border in HTML Form Without CSS?

Published in HTML Styling 3 mins read

You can add a border to your HTML form elements without using CSS by utilizing the deprecated border attribute directly within the HTML tags themselves, specifically the <form>, <table>, <fieldset>, and input-related tags. However, it's strongly recommended to use CSS for styling instead of these deprecated attributes for better control, maintainability, and adherence to modern web standards.

Here's how you can achieve this with some examples:

Adding a Border to a Table (containing your form elements)

The most common way to "add a border to a form without CSS" is to add it to a table that contains the form elements.

<table border="1">
  <tr>
    <td>
      <label for="name">Name:</label>
    </td>
    <td>
      <input type="text" id="name" name="name">
    </td>
  </tr>
  <tr>
    <td>
      <label for="email">Email:</label>
    </td>
    <td>
      <input type="email" id="email" name="email">
    </td>
  </tr>
</table>

In this example, border="1" on the <table> tag adds a 1-pixel wide border around the table and its cells. You can change the value (e.g., border="2") to adjust the border width.

Adding a Border to a Fieldset

The <fieldset> tag can group related elements in a form and you can use its deprecated border attribute to give it a border, too (although this is uncommon). You cannot directly set the border attribute on the <form> tag itself.

<fieldset border="1">
  <legend>Personal Information</legend>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
</fieldset>

Important Considerations and Alternatives

  • Deprecation: As mentioned previously, the border attribute is deprecated in HTML5. This means it's not recommended for use in modern web development. Browsers might still render it, but it's best to avoid it as its support could be dropped in the future.
  • Limited Styling: The border attribute offers very limited styling options. You can only control the width of the border. You cannot change the color, style (solid, dashed, dotted), or rounded corners.
  • CSS is the Best Practice: The recommended approach is to use CSS to style your forms. This provides much greater flexibility, maintainability, and control over the appearance of your forms.

Example of Adding a Border with CSS (Recommended)

<style>
  form {
    border: 1px solid black; /* Example: 1px solid black border */
    padding: 10px; /* Add some padding for spacing */
  }

  /* Apply to specific form elements */
  input[type="text"],
  input[type="email"] {
      border: 1px solid #ccc;
      padding: 5px;
  }
</style>

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
</form>

This CSS example shows how to add a border to the form element itself and to specific input types. Using CSS gives you full control over the border's style.

In summary, while you can technically add borders to HTML form elements using the deprecated border attribute on tables and fieldsets, it's highly discouraged. Using CSS is the modern and recommended way to style your forms, providing greater control and flexibility.

Related Articles