Arranging the form in an organized and visually pleasing manner

Does anyone have any ideas on how to design this form in a clean and organized way? I've experimented with lists, tables, and divs but can't determine which works best.

Contact Information:
    <div class="formsubmit"><label>Name:</label><input type="name"  name="name" placeholder="John Doe" required />
<label>Email:</label><input type="email" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52383d3a3c0d363d3712372a333f223e377c">[email protected]</a>" required /><span class="form_hint">Proper format "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe1eee2eacffce0e2eafbe7e6e1e8a1ece0e2">[email protected]</a>"</span>
<label>Telephone:</label><input  type="tel" name="telephone" placeholder="##########" required pattern="[0-9]{10}"/>
      <span class="form_hint">Proper format "##########"</span>

      

Type:
    <input type="checkbox" name="Type" value="condo" id="condo"><label>Condo</label>
    <input type="checkbox" name="Type" value="house" id="house"><label>House</label>


<input type="checkbox" name="title" value="freehold" id="freehold"><label>Freehold</label>
<input type="checkbox" name="title" value="leasehold" id="leasehold"><label>Leasehold</label>
<input type="checkbox" name="title" value="coop" id="coop"><label>Co-op:</label><a class="footnote">Check all that apply</a>

htmlcssforms

Answer №1

When creating an HTML form, it is important to write semantic code. Make sure to use the form tag along with fieldset, legend, and label with for ="ID".

For a demonstration, you can view this Demo.

label, input{float:left; display:block;}
div{clear:left; padding:5px 0}
label{text-align:left; width:30%;}
 <form action=" " method="post">
     <fieldset>
    <legend>Contact Information: </legend>
    
   <div> <label for="f_name">First Name </label>
     <input type="text" id="f_name" /></div>
    <div> <label for="l_name">Last Name </label>
      <input type="text"  id="l_name" /></div>
     </fieldset>
  </form>

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

Guide to executing specific functions based on selected dropdown options in Angular 5

Several drop down menus need to be implemented. The requirement is that when an option from the drop-down is selected, a corresponding custom function should be called. However, in the code below, what should replace opt.mtd since it is not functioning as ...

htmlangulartypescript1.7

Troubleshooting: Issues with JQuery and setTimeout() functionality

While using JQuery to monitor key presses for an HTML game, I encountered an issue where adding the jquery code to my gameloop resulted in an error message stating that keydown was not defined. <html> <head> //...Included JS files ...

javascriptjqueryhtmlsettimeoutkeydown

When clicking, jQuery fails to hide the div

Here is some HTML code for you to check out: <div class="FormContainer" id="FirstFormContainer"> <form> <span> Enter the number of subjects</span></br> <input id="NumberOfSubjects" /></br> <span& ...

jqueryhtmlclickhide

Using $_POST method to navigate within the same web page

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP links</title> <?php echo '<div style="background-color:#ccc; padding:20px">' . $_POST['message'] . '</div>'; ...

phpjquerycsssqlajax

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

javascripthtmlcsslayoutresponsive-design

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

htmlcss

Hide elements on desktop viewport using media queries

If you want to see the code I'm using on my live site, visit www.randolphlibrary.org/mobilesite.htm In short: How can I implement a list-view style for users with a viewport of max-width 768px so that it caters to mobile users? My plan was to add th ...

htmlcssjquery-mobile

Concealing anchor and span elements using CSS in Internet Explorer 7

I decided to simplify things by creating a style within the document to address my specific issue. The problem I encountered involves a row of 4 links that are designed to resemble buttons. I have chosen to hide the Next link (the 3rd item) using CSS. Whil ...

css

Adjusting the alignment of button text in an Angular Kendo grid

I am currently utilizing the grid view feature of Kendo UI for Angular. While I have buttons on the grid, the issue is that the text within the buttons is not centered properly despite applying styles such as text-align:center. Here is the template for my ...

cssangularkendo-ui

Adjust the size of an image and move its position both vertically and horizontally using Javascript

I am currently working on transforming an image both vertically and horizontally, as well as scaling it using JavaScript. While I have managed to resize the image successfully, it doesn't quite look how I want it to. I am aiming for a similar effect a ...

javascriptcss

Implementing sliders for interactive functionality with an HTML table

I need to implement sorting and sliding features on an HTML table using jQuery. Sorting has already been achieved by utilizing the DataTable.js jQuery library. The challenge now is to incorporate a slider into the table, with all subject columns being scro ...

javascriptjqueryhtmlhtml-tableslider

The newly added highlighted CSS in jQuery cannot be removed once an alert is generated

http://jsfiddle.net/Cyjye/ I am a beginner with jquery. I have created an HTML table shown in the jsfiddle link. Initially, the selection should be made from the second row, second cell, but in my HTML table, the selection is being made from the first ro ...

jqueryhtmlcss

The content in the div is not contained within a border in the css/html

I am struggling with a div wrapper that has a border, but the border is not wrapping around the content and I can't figure out why. Here is my issue on screen: This is what I want it to look like: Below is my HTML code: <div class="event_area_t ...

htmlcssborderwrapper

Having difficulty sending a value with %45 to a REST API

Currently, I'm encountering an issue within my ASP.NET MVC 5 application. The problem arises when I send the following JSON data to a third-party API, which includes a password field: "{\"operation\":{\"Details\":{\"RESOURCE ...

c#htmlasp.netjsonjson.net

Add a message displaying the error in the input field using jQuery Validation

Is there a way to append the jQuery Validation error messages to the input field or get help with positioning them properly? The random popping up of error messages is causing chaos in the form layout. I prefer to have the error messages displayed undern ...

javascriptjqueryformsvalidation

Minimize ring size through mesmerizing smoke effects

I came across this stunning ring with a captivating smoke animation, but I am struggling to comprehend its design fully. My goal is to resize the ring to about 80px and maintain only a single color throughout. However, my attempts to simply reduce the siz ...

htmlcss

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

javascriptcsswebdom

Adding an image within the body of text in a Django model, where both the text and image coexist

I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...

javascriptpythonhtmlcssdjango

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

this is the desired appearance but upon pasting the identical code: <!-- placeholder div --> <div style="height:100px;"> </div> <!-- outer container div (with specified height) --> <div style="height:80vh;"& ...

htmlcsswordpressresponsive-design

Executing a TypeScript function directly in HTML without the need for a click event

I understand how to trigger a TypeScript function when clicking a button, but how can I initiate a function without relying on a specific event? My goal is to call a function once an array named chartData has been populated. Here is the code snippet I have ...

javascripthtmltypescriptangular