Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements.

I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different commands or syntax that would be more effective?

Are there any redundancies in the code that can be eliminated?

Additionally, I am looking for suggestions on how to center the Send button in the middle of the form and possibly move it closer to the bottom without too much trouble. Is there a way to adjust the position of the placeholder text towards the left as well?

I will provide a link to a pen where you can review the code.

https://codepen.io/anon/pen/pYNPrw

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <form action="#">

    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>

    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>

    <button type="submit">Senden</button>
  </form>
</body>

</html>

Answer №1

After making some adjustments to your code by including a margin property to reposition the button and commenting out the transform property, I recommend utilizing a CSS framework like bootstrap or material design for a more efficient way of styling forms.

h2 {
    margin: 0;
    padding: 0;
margin-bottom: 2.3rem;
}

form {
  float: left;
  display: inline-block;
  padding: .5rem;
  height: 205px;
  width: 168px;
  border: 2px solid black;
  font-family: Sans-Serif;
  font-size: 12px;
}

.input-wrapper {
  margin-bottom: .5rem;
}

label {
  width: 50px;
  display: inline-block;
  text-align: left;
 font-family: Sans-Serif;
font-size: 14px;
}

input {
  width: 90px;
  padding: .5rem;
  height: 3px;
  border: 2px solid black;
  text-align: left;
}

button {
  padding: .5rem;
  display: block;
  width: 55%;
  background: lightgrey;
  color: black;
  border: 2px solid black;
  text-align: center;
  border-radius: 5px;
  font-size: inherit;
  /* transform: translate(50%, 50%); */
  margin: 60px auto;
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <form action="#">

    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>

    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>

    <button type="submit">Senden</button>
  </form>
</body>

</html>

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

Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns. I am attempting to include text directly below the photo within each cell. This is what my code looks like: <div class="arrange-fixes"> ...

Utilizing a jQuery variable within an .html() method

Can a Jquery if statement be used to display different content inside a div based on a variable? For example, if the variable is set to "cats", the displayed content might say "I like cats", and if it changes to "dogs", it would read "I like dogs". Is this ...

Optimizing Bootstrap for Tablet Browsing in Internet Explorer

Hey there, I have a question regarding Internet Explorer and tablets. As I revamp this website and integrate Bootstrap into it, my focus is currently on the small-sized IE browser for tablets. My dilemma arises from not knowing if there are any tablets th ...

Customizing arrays in DataTables allows for creating new columns and displaying them in the table according to the specified customizations

Displaying dynamic data in a data table involves taking an array as input and customizing the fields within that array. ...

Identify HTML elements within a textarea or text input using JavaScript while also accommodating the common special characters ">" and "<"

Is there a way to accurately detect HTML tags in textarea or text input fields before submitting a form? While it may seem straightforward to use regular expressions like /<\/?[^>]*>/gi.test(str) for this purpose, the challenge arises when de ...

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

The image on the landing page is not properly scaling to fit the size requirements

Currently utilizing Bootstrap Studio, I incorporated the code background-size:cover. While it works well in desktop mode, it unfortunately isn't very mobile-friendly. Below are screenshots for reference: Mobile View Example Desktop View Example ...

Using jQuery and CSS to create a temporary placeholder for images that have varying sizes

I am currently developing an innovative image gallery feature where a temporary heart image is displayed for 1 second in place of the actual images (image 1, image 2 etc). If you want to view the implementation, check out my jsfiddle below: https://jsfid ...

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

Storing data in a text or HTML file using server-side JavaScript

Currently, I am working on a JavaScript form that involves saving user-entered variables to either a .txt file or a new webpage with the variables pre-filled in the inputs. I know that JavaScript cannot directly manipulate the user's machine, but I am ...

What is the best way to continuously execute the 'onclick' function using AJAX inside a specific ID?

My challenge involves implementing a new AJAX upload feature to insert a data element from the onClick event in multiple rows. The issue I am facing is that it works fine for the first row, but when I add subsequent rows, the function no longer works upon ...

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

Prevent the use of repetitive borders by utilizing display: inline-block

I've been experimenting with the behavior of div elements when used as a table, rather than using the traditional table element or display properties. The main reason for this is that I have found tables and display properties to be problematic for my ...

changing the RadioButtonList to preselect a default value

On a page, I have a pre-existing RadioButtonList where I want to make the second button checked by default instead of the first one. Since I am unable to edit the original control directly, it seems like I might need to achieve this using javascript on th ...

What is the process for reversing styles on the second click?

This is the script I've written: function displayPanel(index, colorCode) { buttons.forEach(function(button){ button.style.borderBottom=""; }); tabButtons[index].style.borderBottom="none"; panels.forEach(function(panel){ ...

Despite implementing the necessary middleware, the CSS file still refuses to load

My CSS files are not loading properly. When I inspect the element (F12) and go to Networks, my CSS file is not visible. I have added the middleware: app.use(express.static(path.join(__dirname, '/public'))); and required the path above it. I ha ...

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

I am faced with a unique design challenge where I am utilizing the MatCardComponent and each card contains a table. I would like to incorporate a floating label within the border gap similar to what is seen in MatFormField. https://i.stack.imgur.com/51LBj ...