CODEWITHSUNDEEP
htmlcss
check nova
check nova

Reputation: 281

How can i prevent to start inputs at nasty way

I want to my text box start at in line. What should I do? This my code.

<div id="middle">
   <div id="left">
   </div >
   <div id="m">
        Name: <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
        Family: <input type="text" name="y1" id="Family1"> <label  style="display: none " id="Family" name="y2" >B </label><br />
        Phone: <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />

        <button  onclick="myFunction()">save</button>
        <button  onclick="myFunction1()">refresh</button>
   <div>

The result is:

enter image description here

But I want it to display like so without using space:

M

Upvotes: 0

Views: 46

Answers (2)

lukehillonline
lukehillonline

Reputation: 2647

There are quite a few improvements that you could implement into your code. I would like to help solve your problem and improve your coding standards.

First of all to solve the issue in question. First, you need to wrap your label text in an element, this will allow you to apply a width to them so they align nicely, a <label> element will be best suited.

Like so:

HTML

<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label  style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />

CSS

label {
    display: inline-block; // a label is display: inline; by default so needs to be set to display: inline-block; so it takes a new width
    width: 70px;
}

This will solve the issue.

To take your code further I have some recommendations.

  • Try and use IDs less, it is a good practice to use classes for all styling and only use IDs when necessary for JS DOM manipulation.
  • <label> elements can be given a for attribute that links it to an input, meaning when you click the label it will select the input, this is better user experience.
  • I recommend using the BEM class naming conventions to make sure you have clear and understandable CSS class names. BEM
  • In your <input> elements you have the same name. This is semantically ok but only when using type="radio", for all other input types they should each have a unique name.
  • Try and avoid putting inline style="..." unless absolutely necessary, it is much cleaner to keep CSS inside a CSS file.

If we apply all of these you will end up with code like so:

.inputs__row {
  margin-bottom: 10px;
}

.inputs__label {
  display: inline-block;
  width: 70px;
}
<div class="inputs">
    <div class="inputs__row">
        <label class="inputs__label" for="name">Name:</label>
        <input type="text" class="inputs__input" name="name" id="name" />
    </div>
    <div class="inputs__row">
        <label class="inputs__label" for="family">Family:</label>
        <input type="text" class="inputs__input" name="family" id="family" />
    </div>
    <div class="inputs__row">
        <label class="inputs__label" for="phone">Phone:</label>
        <input type="text" class="inputs__input" name="phone" id="phone" />
    </div>
    <div class="inputs__row">
        <button  onclick="myFunction()">save</button>
        <button  onclick="myFunction1()">refresh</button>
    </div>
</div>

Hope this helps.

Upvotes: 1

adel
adel

Reputation: 3507

label{
   width:50px;
   display:inline-block
}
<div id="middle">
    <div id="left">
    </div >
    <div id="m">
       <label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
    <label>Family:</label> <input type="text" name="y1" id="Family1"> <label  style="display: none " id="Family" name="y2" >B </label><br />
    <label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />




    <button  onclick="myFunction()">save</button>
    <button  onclick="myFunction1()">refresh</button>

adding label solve it!

Upvotes: 2

Related Questions