Jump to content

2 inpute Type:text elements look like 1


BlackSeBo

Recommended Posts

Hi,

first of all sry for my bad english

i have a little problem with the following code:
 

<div class="formular">

           <form method="post" name="kd_form">
               <select id="vo" title="VO">
                   <option value="11111111">Reutlingen</option>
                   <option value="22222222">Tübingen</option>
                   <option value="33333333">Nürtingen</option>
               </select><br>
               <div class="formname">
                   <input id="name" type="text" placeholder="Vorname">
                   <input id="name" type="text" placeholder="Name">
               </div><br>
               <input id="street" type="text" placeholder="Straße"><br>
               <input id="plz" type="text" placeholder="PLZ">
               <input id="town" type="text" placeholder="Stadt"><br>
               <input id="kdn" type="text" placeholder="Kundennummer">
               <input id="kw" type="text" placeholder="Kennwort"><br>
               <input id="nummer" type="text" maxlength="12" placeholder="Rufnummer">
           </form>
       </div>

the CSS:

.formname{
}
#name{
   display: inline-block;
   height: 2em;
   width: 15em;
   text-align: center;
   margin: 0;
   border: 1px 0;
}
#name:first-child{
   border-bottom-left-radius: 15px;
   border-top-left-radius: 15px;
   border-right: 0;
}
#name:last-child{
   border-bottom-right-radius: 15px;
   border-top-right-radius: 15px;
   border-left: 0;
}

thats the result:

5497d1505676366-2-inpute-type-text-eleme


my problem is that i want to show 2 <input type=text> like 1 but i have a small space between both and dont know where to define that to set it to 0.

i am sure that it is something very easy but i am not able to solve it now

Link to comment
Share on other sites

Firstly, I don't understand the question, but you have some errors of

1) An id reference value must be unique within a page you have multiple 'name' id value names.

2) IF this form is being submitted, to be processed by server language such as PHP, you need to add a name attribute to each input.

3) Requires submit.

4) I think this is what you are referring to, using display: inline-block; and stacking inputs above each other causes a line break, which is treated as white space the size of current font-size used. To fix you can

              a) Butt inputs together and not stack one above the other.

              'b) Set font-size: 0; to '.formname' element

             c) Use minus margins left/right of inputs, for right of first and left edge of second.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...