Arrange the input fields within a fieldset to ensure proper alignment

Having a challenge aligning selection input fields in a fieldset and submit button for optimal style and user comfort. Seeking advice to improve visual appeal from those experienced with CSS.

<fieldset>
  <table width="100%" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0">
    <tr>
      <td align="left">Student ID: #:
        <select name="ID" size="1">
          <option>Select ID</option>
          <option>SE45</option>
          <option>SE46</option>
          <option>SE47</option>
        </select>
      </td>;

      <td align="left">Subject:
        <select name="subject" size="1">
          <option>Select Subject</option>
          <option>Science</option>
          <option>Maths</option>
        </select>
      </td>;
    </tr>
    <tr>
      <td align="left">Class:
        <select name="class" size="1">
          <option>SEC2A</option>
          <option>SEC2B</option>
          <option>SEC2C</option>
        </select>
      </td>;
    </tr>
    <tr>
      <input type="button" value="submit" />
    </tr>
  </table>
</fieldset>

After extensive searching on input field alignment, found limited resources that were not entirely helpful.

Intending to create a useful post for fellow readers to share suggestions for aligning input fields effectively.

jsFiddle: http://jsfiddle.net/jaggs/wdzgm1x0/

jqueryhtmlcss

Answer №1

fieldset {
  background-color: #ccc;
  padding: 10px;
}
td {
  padding: 5px;
}
#submit-btn {
  color: white;
}
select{
  width: 100px;
}

label{
  display: block;
  width: 100px;
}
<fieldset>
  <table width="100%" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0">
    <tr>
      <td align="left">
        <div class="form-group">
          <label for="ID">Student ID: #:</label>
          <select class="form-control" name="ID" size="1">
            <option>Select ID</option>
            <option>SE45</option>
            <option>SE46</option>
            <option>SE47</option>
          </select>
        </div>
      </td>
      <tr>
        <td align="left">
          <div class="form-group">
            <label for="subject">Subject:</label>
            <select class="form-control" name="subject" size="1">
              <option><i>Select Subject*</i></option>
              <option><i>Science</i></option>
              <option><i>Maths*&i></option>
            </select>
          </div>
        </td>
      </tr>
    </tr>
    <tr>
      <td align="left">
        <div class="form-group">
          <label for="class">Class:</label>
          <select class="form-control" name="class" size="1">
            <option>SEC2A</option>
            <option>SEC2B</option>
            <option>SEC2C</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input class="btn btn-primary" type="button" value="Submit" />
      </td>
    </tr>
  </table>
</fieldset>

Answer №2

<fieldset>
<table width="100%" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0">
<tr>
  <td align="left">Student ID: #:</td>
  <td><select name="ID" size="1">
  <option>Select ID</option>
  <option>SE45</option>
  <option>SE46</option>
  <option>SE47</option>
</select>
</td></tr>

<tr><td align="left">Subject:</td><td>
<select name="subject" size="1">
  <option>Select Subject</option>
  <option>Science</option>
  <option>Maths</option>
</select>
</td>
</tr>
<tr>
<td align="left">Class:</td><td>
<select name="class" size="1">
  <option>SEC2A</option>
  <option>SEC2B</option>
  <option>SEC2C</option>
</select>
</td>
</tr>
 <tr><td colspan=2>
   <input type="button" value="submit" />
 </td></tr>
 </table>
 </fieldset>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding event listener to a dynamically created video element

Could you provide any insight as to why I'm encountering an error message "Can't create event listener on null" when using the following code: var my; my.newVidObj = document.createElement('video'); my.newVidObj.src = "vid- ...

javascriptjqueryeventshtmlvideo

elements overlap when styled differently

Hello all, I'm in need of some assistance with arranging the items on my webpage. As a beginner, I require detailed explanations as some things may be obvious to you but not to me :) Specifically, I am looking to enhance my header design. My goal is t ...

htmlcsswordpressbootstrap-4

Form featuring a variety of buttons, each one designated to submit the form upon clicking

Within the form named 'file-upload', there is a submit button: <button id="btn-save" type="submit">Save</button> To call this functionality, I utilized the following code: $('#file-upload').submit(this.save.bind(this)); ...

jquery

Fade out embedded images or target specific classes when hovering over them with the mouse

Is it feasible to use JavaScript or jQuery to fade only the embedded image instead of the entire div, revealing the background image of the div? I have multiple instances of the classes below and wish to apply these changes only to the selected ones. For ...

javascriptjqueryhtmlcss

"JQPlot line chart fails to extend all the way to the edge of the

My jqPlot line plot looks great, but it's not extending all the way to the edge of the containing div, which is crucial for my application. I've tried adjusting all the options related to margins and padding, but there's still a noticeable g ...

javascriptjqueryhtmllayoutjqplot

Interact with a shared array across multiple HTML pages using JavaScript

Currently, I am developing a web application that involves pushing values into an array through a JavaScript function on one HTML page and then accessing the same array from another JavaScript function on a different HTML page. Here is the code snippet I ...

javascripthtmlarrays

Execution of Ajax call fails to occur synchronously

I have created a unique weather website that utilizes the flickr API as well as the yahoo API to gather weather data. However, I am facing an issue where the ajax call from the yahoo API does not retrieve the necessary data in time for the content of the p ...

javascriptjqueryhtmlajaxperformance

PHP code cannot be outputted to JavaScript due to a syntax error

Although there is a syntax error, the code seems to be working. I am curious about how to make it syntactically correct. The provided code snippet is part of a script that sets up variables for an Ajax call. Depending on the scope, the corresponding varia ...

javascriptphpjqueryajax

Printing a list of values from a C# page to the presentation layer (ASPX)

I am dealing with a list object in my Cs page that has 2 rows. So, how can I access it separately on my Aspx page? For instance, for a single value, the code would look like this: $("#txtBilldate").val(data.d.lphBillDate); But how can I retrieve a list ...

javascriptjqueryasp.netajaxjson

Selecting Content Dynamically with jQuery

I have a webpage with multiple dynamic content sections. <div id="content-1"> <div id="subcontent-1"></div> <i id="delete-1"></i> </div> . . . <div id="content-10"> <div id="subcontent-10"></d ...

javascriptphpjqueryhtml

When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu. The hover effect changes the background color only in the box area, but not in the text area. I would like to figure out a way to make both areas change color on hover: Here is the code snippet: <div class="se ...

csslistmenubackgroundhover

Steps to customize the Spark theme in Flex 4

In the default Spark theme in Flex 4, what type of styling is included? Additionally, how can one override the Spark theme? For instance, when attempting to change the background color but seeing no effect, even though the CSS code appears correct. Here&ap ...

cssflex4

Issues with Lightbox Variables

My current project involves implementing a JavaScript-based LightBox script. Although I'm relatively new to JavaScript, I used a script provided by a friend for this purpose. Unfortunately, the script seems to work only for one image on the page, leav ...

javascripthtmllightbox

Pressing the AJAX button triggers a process but does not alter its state

Many others seem to have encountered the same issue as me, but unfortunately, none of the suggested solutions seem to work in my case. I am currently following Michael Hartl's tutorial. My follow system is set up based on chapter 14 of the latest edit ...

javascriptjqueryruby-on-railsrubyajax

Tips on sorting numbers in a column in the x e y format (displayed as powers of 10) the right way

Looking for a way to sort numbers represented as powers of 10, like 5e6 (5,000,000) and 4e4 (40,000), in jqgrid efficiently. Any suggestions? I was considering calculating values in a hidden column and sorting based on that when sorting the x e y column, ...

jqueryjquery-pluginsjqgrid

Is it possible to align an image that uses position:relative with one that uses position:absolute?

On a webpage, I have placed two images. The first image is set to position:relative and the second image is positioned right below it with position:absolute. How can I ensure that as you zoom in or out, the second image remains aligned with the first ima ...

javascripthtmlcssimagecss-position

Is it beneficial to switch from Prototype to jQuery in AJAX requests?

Here is a Javascript function I have written using Prototype: <script type="text/javascript> function go(qry) { new Ajax.Request('script.py?q=' + qry, {method: 'GET'} ); } </script> I am looking to conv ...

javascriptjqueryajaxprototypejs

Magellan in Foundation - stop applying the "top" style to the element

By default, Magellan (Sticky navigation's plugin in Foundation) adds the "top" property to an element. I want to prevent this from happening because I have a fixed top bar and I want the navigation to appear underneath it. The navigation display is an ...

htmlcsszurb-foundation

Displaying various dropdown content when different buttons are clicked

In my interface, I have implemented a drop-down menu that consists of two options. When the "Add Equipment" option is clicked, everything functions properly as expected. However, when I select the "Deployed Equipments" option, the drop-down for "Add Equipm ...

htmlcssbuttondropdown

Wordpress AJAX response shows up as zero

I am having trouble with my ajax request as it keeps returning 0. I am not sure why I am not receiving a response back. The functionality of the my_ajax_pagination() function is unclear to me. I came across it while searching for solutions online. $(docum ...

phpjqueryajaxwordpress