I need to use HTML formatting to ensure that my form appears professional and visually pleasing

Currently, I am working on enhancing the appearance of an HTML form. However, I seem to be struggling with the formatting, and I also aim to ensure that the form is responsive. My goal is to have the first name and last name fields on one line, followed by the address, city, state, email, phone number on separate lines, and finally, the submit button and privacy link at the end. I attempted a nested table approach, but it did not yield satisfactory results.

I am seeking advice on aligning the fields correctly as they are currently displaying varying lengths. The address field appears shorter compared to others, leading to misalignment. If anyone has suggestions on how to fix this issue and make all the fields consistently lined up, please share your insights. You can view my sample here


/* CSS code snippet */
:before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* More CSS styles follow... */

<!-- HTML Code Snippet -->
<table width="100%" id="p3" cellpadding="0" cellspacing="0">
    <!-- Table content goes here... -->
</table>

Answer №1

Tables should only be used for tabular data, using them for formatting is a definite no-no.

Additionally, this layout is not responsive and will look poorly on mobile devices (try resizing the screen to see for yourself).

I suggest utilizing a framework to simplify your design process. Check out Bourbon / neat if you're familiar with sass, or consider pure css if you're new to it.

Tip: It's okay to put inputs on separate lines, scrolling down isn't as bothersome as you might think - take advantage of your screen space.

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

Determining the size of an object in ASP.net as a percentage of the page, while taking into account the size of

I need help adjusting the size of a silverlight app on a page with multiple banners above it. My goal is to make the app's height always 100% of the screen height minus the banner's height to prevent any scroll bars from appearing. Does anyone kn ...

Unable to save the ID of an element into a jQuery variable

I am currently working on a project that involves an unordered list with anchor tags within it. I am trying to access the id of the li element that is being hovered over, but for some reason, the alert is returning undefined or nothing at all. Here is the ...

How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph. However, I am unsure which class to focus on and what the correct syntax should be. I in ...

Welcome to the launch of OpenWeatherMap!

I just signed up for an account on the OpenWeatherMap website. My goal is to retrieve the current weather information for a specific location using the City ID API Call: http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=myAPIKey How ca ...

Creating a WordPress page with multiple URLs: A step-by-step guide

Is it feasible to design a WordPress page with several different URLs? I aim to assign one distinct URL to each section, while still maintaining original content for SEO purposes. Avoiding the use of anchors is desired since they do not hold separate ran ...

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

Customizing the navigation bar color upon page load in Ionic

Hey there! I'm looking to switch up the color of my nav-bar every time a page loads. So, I gave this a shot in menu.html: <ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="{{headerCl ...

Are you in search of an opening <html> tag for your project?

When I use Initializer to quickly generate HTML5 + Boostrap boilerplates, I noticed that the HTML document it creates does not include an opening <html> tag. This got me curious. Here is the beginning portion of the code generated by Initializr: &l ...

Having trouble locating specific elements on Yahoo News with Selenium in Python?

I am currently facing some challenges with extracting comments from Yahoo News using Selenium. I have successfully clicked on the comments button to open it, but now I am struggling to locate the text of the comments section. from selenium import webdriver ...

I am utilizing a drop-down menu and aiming to showcase its selected value on the following page

When using a drop-down list, the desired outcome is to display its name on the next page. However, it seems to be displaying the ID instead of the name when writing code as shown below. If both values are included like value="{{operator.id}}{{operator.op ...

The values coming from my cascading combo boxes are incorrect

My form contains drop down boxes with options that dynamically change the values of the next drop down box based on the selection. When I choose the first training option, the dates are successfully sent through the form to my email address. However, i ...

Is the attribute of the label malfunctioning within an Angular directive?

As I delve into the world of angular directives, I have encountered success in many aspects. However, there is one minor issue that has been troubling me lately. Within my directive, I have set a for attribute to match the id of an input field. Strangely, ...

Is there a way to change the color of a single word without affecting the rest of the line?

https://i.sstatic.net/vFWgU.png I am encountering an issue where I only want the word "declined" to be color inverted, rather than the entire line. Can anyone provide assistance with this? .invert { background-color: white; filter: invert(100%); } ...

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

Manipulating the "is-invalid" class in CodeBehind with ASP.NET

I'm in the process of developing an ASP site that requires users to fill out a form. I have incorporated textboxes, dropdown lists, and utilized Bootstrap 4 for styling purposes. The entire content is enclosed within an update panel to ensure a respon ...

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

Triggering a JavaScript event with every update to the DOM marked as "completed"

I've been having some trouble with a specific task. I'm working on a script where I need to execute some functions after DOM manipulation is complete. The challenge is that I can't make changes to any other scripts on the page, as they might ...

Dynamic Loading of Hovercards using jQuery AJAX

I've been working on integrating jQuery hovercard into our web application, specifically to display HTML content retrieved from an AJAX page when a user hovers over a username link with the data attribute data-toggle="user". Here's what our code ...

Unable to get the splash screen to display at 100% height using CSS

Here is an example of a splash screen I have created. HTML <div id="spalsh"> <span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span> </div> CSS #spalsh{ width: 98%; ...

Issue with Chrome styling of li and a elements persists after link click

In my current project, I am facing an issue with my menu displaying differently in Firefox and Chrome. When clicking on the links in Chrome, they tend to move around, disrupting the styling of the menu. A common suggestion I found was to use display: block ...