CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 133

Positioning a form label

Creating a form, and would like to position the labels on the top left corner of the input texts. Currently have it working by placing a margin-right on the labels - but I don't think this is the 'best' solution. Any other ways round doing it without having to use a margin/padding? 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

*{
    border:none;
}
/* here starts my CSS */
.contact-us{
    background-color:#FFB6C1;
    clear:left;
    text-align:center;
    position:relative;
}

.contact-us form{
    margin-top:20px;
    font-family:'amiri';
    border:none;

}

.contact-us form input{
    margin-bottom:10px;
}

.contact-us h2{
     font-family:'Pacifico',sans-serif;
     font-size:30px;
     text-align:center;
     margin-top:20px;
}

input{
    margin:0 auto;
}
input,label{
    display:block;
}

label{
    margin-right:25%;
}

input[type="text"]{
    width:30%;

}

textarea{
    width:30%;
    height:80px;
}
<div class = "contact-us">
	<div class = "inner-wrapper">

		<h2> Contact </h2>
		
		<form>

			<section>
			
			<label for ="name">Name</label>
				<input type = "text" name = "name"><br>

			<label for ="email">Email</label>
				<input type ="text" name = "email"><br>
				
			<label for ="message">Message</label>
			<textarea name ="message">Enter text here...</textarea>

			</section>

		</form>
	</div>
</div>

Upvotes: 0

Views: 263

Answers (2)

Tejasvi Karne
Tejasvi Karne

Reputation: 648

The only reliable and least hacky way I could think of is to use position. I have taken the liberty of modifying the HTML. The form fields moved inside the label. Its still valid HTML. See if it works for you.

label{position:relative; display:inline-block;}
label span{position:absolute; top:0; left:0; font-size:14px; line-height:1;}
input,textarea{padding-top:14px;}
<form>

<label><span>Name</span>
<input type="text" name="name">
</label>

<label><span>Email</span>
<input type="text" name="email">
</label>
				
<label><span>Message</span>
<textarea name ="message">Enter text here...</textarea>
</label>

</form>

Upvotes: 0

DanD
DanD

Reputation: 141

I'd do this by placing each label along with its respective input field into a div. Make the label and input field aligned with the left side of the div; all you need to do now is edit the div to move the positioning of the label and input field in unison.

To do this, I created a div class called inputfielddiv (see below). Just adjust the left-margin of inputfielddiv to adjust the positioning of all of the fields and their respective labels.

Hope this helps! Let me know if you need further clarification.

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

*{
    border:none;
}
/* here starts my CSS */
.contact-us{
    background-color:#FFB6C1;
    clear:left;
    text-align:center;
    position:relative;
}

.contact-us form{
    margin-top:20px;
    font-family:'amiri';
    border:none;

}

.contact-us form input{
    margin-bottom:10px;
}

.contact-us h2{
     font-family:'Pacifico',sans-serif;
     font-size:30px;
     text-align:center;
     margin-top:20px;
}

input,label{
    display:block;
}



input[type="text"]{
    width:30%;

}

textarea{
    width:30%;
    height:80px;
    display:block;
}

.inputfielddiv {
  margin-left: 30%;
}
<div class = "contact-us">
	<div class = "inner-wrapper">

		<h2> Contact </h2>
		
		<form>

			<section>
			<div class="inputfielddiv">
			<label align="left" for ="name">Name</label>
				<input align="left" type = "text" name = "name"><br>
      </div>
      
      <div class="inputfielddiv">
			<label align="left" for ="email">Email</label>
				<input align="left" type ="text" name = "email"><br>
		  </div>
      
      <div class="inputfielddiv">
			<label align="left" for ="message">Message</label>
			<textarea align="left" name ="message">Enter text here...</textarea>
      </div>
      
			</section>

		</form>
	</div>
</div>

Upvotes: 1

Related Questions