Archief - Zoek form met input fields naast elkaar

SDX · 17 dec 2010

Hello deisgners,

Ik zou willen een simpel opzoek formuliertje maken in de volgende stijl:

Naam
Telefoon
Postcode Stad

Zoekbutton

Dus postcode en stad zouden naast elkaar moeten staan.

Kan iemand mij hiermee op weg helpen want ik kan er niet veel over vinden op google.

Thanks!

GregoryCo · 17 dec 2010

Niet veel te vinden?
Let me google that for you

SDX · 17 dec 2010

Pfff leuk hoor...
Zie jij daar een form tussen staan met twee input fields naast elkaar?

dendaak · 17 dec 2010

Maakt u form al is eerst en plaats het hier.
Derna zullen we u wel helpen met wat ge mis plaatst.

Sick-Boy · 17 dec 2010

Forms en andere elementen naast mekaar zetten is niet veel verschillend.
Zoek eens op horizontal alignment of iets in die aard.

Drone · 17 dec 2010

Code:

<form>
	<p>
		<input type="text" name="Foo" value="" id="Foo" />
	</p>

	<p>
		<input type="text" name="Foo" value="" id="Foo" />
		<input type="text" name="Bar" value="" id="Bar" />
	</p>

	<p>
		<input type="submit" value="Continue &rarr;" />
	</p>
</form>

SDX · 17 dec 2010

Ok ik heb iets in elkaar kunnen steken (embedded css):

Code:

<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/14px Arial, Helvetica, sans-serif;
color: #000;
min-width: inherit;
max-width: 480px;
margin: 20px auto;
text-align: left;
}
h1 {
font: bold 14px Helvetica, Arial, sans-serif;
margin: 10px 0px;
}
p {
width: auto;
margin: 0px 0px 20px 0px;
}
ul {
margin: 5px 0px 15px 0px;
padding: 0px;
}
li {
margin-left: 20px;
}
h4 {
float: left;
padding-right: 5px;
}	
form {
width: auto;
text-align: left;
}
form h3 {
clear: both;
padding: 0px;
font-size: 8px;
}
form label {
display: block;
width: auto;
font-size: 12px;
line-height: 14px;
padding: 0px 0px 12px 0px;
}
form input {
display: block;
margin-top: 1px;
}
form label.field-naam,
form label.field-tel,
form label.field-post {
clear: left;
}
form label.field-post,
form label.field-stad {
float: left;
margin: 0px 10px 0px 0px;
width: 150px;
}
form label.field-post input,
form label.field-stad input {
float: left;
width: 150px;
padding: 0px;
}
form label.field-tel,
form label.field-naam {
float: left;
width: 310px;
margin: 0px 0px 0px 0px;
}
form label.field-naam input,
form label.field-tel input {
float: left;
width: 310px;
padding: 0px;
}
textarea {
display: block;
}
form input#checkbox_1 {
clear: both;
float: left;
padding: 0px;
margin: 0px;
}
form label.field-checkbox {
clear: none;
margin: 0px 0px 0px 25px;
padding: 0px 0px 15px 0px;
}
form textarea {
margin-top: 1px;
}
#button {
font-size:12px;
font-weight:bold;
color:#333;
text-decoration:none;
display:block;
width:100px;
height: 20px;
padding:2px;
margin-bottom:20px;
border:1px solid #000;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
#button:hover {
color:#fff;
border-color:#3278BE;
}
</style>
</head>
<body>
<form name "LOGIN" action="loginvalidator.htm" method="POST">
<input id="action" type="hidden" value name="action">
<input type="hidden" value="CRM" name="caller">
<input type="hidden" value="return" name="func">
<input value="NQ2" name="thenext" type="hidden">
<p>[**formparameters**]</p>
<h4><input type="image" onClick="document.getElementById('action').value='hoofdmenu';" src="artworkclick.png?36?36?home.png?24?24" alt="Hoofdmenu" title="Hoofdmenu" value="submit" name="I1"></h4>
<h1>CRM: selecteer contactpersoon</h1>
<h3>
<label class="field-naam">Naam<input type="text" name="naam" value="" />
</label>
<label class="field-tel">Telefoon<input type="text" name="address" value="" />
</label>
<label class="field-post">Postcode<input type="text" name="post" value="" />
</label>
<label class="field-stad">Stad<input type="text" name="stad" value="" />
</label>
</h3>
<h3>&nbsp;</h3>
<input id="checkbox_1" type="checkbox" name="searchcontacts" value="y" /><label for="checkbox_1" class="field-checkbox">Ook zoeken in contactpersonen</label>
<h3>&nbsp;</h3>
<input id="button" type="submit" name="I4" value="Submit" />
<hr />
<h3>&nbsp;</h3>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="360">
<td width="350" colspan="4"><p>[**qresult**]</p></td>
</tr>
</table>
</form>
</body>
</html>

Nu zou ik graag hebben dat dit perfect op een smartphone getoond wordt. Hoe pak ik dit het best aan? Zijn er bepaalde basis regels in acht te nemen voor mobile sites?

little · 17 dec 2010

10 tips for designing mobile websites | These Days Labs

-BVR- · 17 dec 2010

Waarom staat dat in godsnaam in h3 tags?

Sick-Boy · 17 dec 2010

BramVroy zei:
Waarom staat dat in godsnaam in h3 tags?

Omdat dat de juiste grootte is, en omdat dat werkt.
Die jongen is absoluut niks met zo'n reply...

Huxley · 17 dec 2010

Afwisselend u element een klasse 'links_form' en 'rechts_form' geven.
En dan die klassen een width geven en floaten.

Zero Grav · 18 dec 2010

Normaal ben ik niet zo voor het geven van code, maar in dit geval kan het wel. Zeker als ik zie dat zelfs de label-tag volledig fout gebruikt wordt.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Sample Title</title>
    
    <style type="text/css">
    
        /*
        Copyright (c) 2010, Yahoo! Inc. All rights reserved.
        Code licensed under the BSD License:
        http://developer.yahoo.com/yui/license.html
        version: 2.8.2r1
        */
        html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
        
        body {
            font-family: verdana, helvetica, arial, sans-serif;
            font-size: 10px;
        }
        
        #container {
            margin-top: 30px;
            margin-left: 30px;
        }
        
        form {
            width: 185px;
        }
        
        form legend {
            display: none;
        }
        
        form fieldset {
            line-height: 23px;
        }
        
        form label {
            width: 50px;
            display: block;
            float: left;
            line-height: 17px;
        }
        
        form br {
            clear: both;
        }
        
        input[type=text] {
            width: 133px;
            float: left;
            line-height: 13px;
            border: 1px solid #0C0C0C;
        }
        
        input.inline {
            width: 47px;
        }
        
        label.inline {
            width: auto;
            padding: 0 5px;
        }
        
        input[type=submit] {
            float: right;
            -webkit-appearance: none;
            border: 1px solid #0C0C0C;
            background: #ECECEC;
            padding: 2px;
            margin-top: 5px;
        }
    
    </style>
</head>

<body>

    <div id="container">
    
        <form method="post" action="">
            <fieldset>
                <legend>Form</legend>
                
                <label for="name">Name</label>
                    <input type="text" id="name" name="name" value="" />
                    
                <br />
                
                <label for="email">Email</label>
                    <input type="text" id="email" name="email" value="" />
                    
                <br />
                
                <label for="zipcode">Zip</label>
                    <input type="text" name="zipcode" id="zipcode" class="inline" value="" />
                <label for="state" class="inline">State</label>
                    <input type="text" name="state" id="state" class="inline" value="" />
                    
                <br />
                
                <input type="submit" name="submit" value="submit form" />
                
            
            </fieldset>
        </form>
    
    </div>
    
</body>
</html>

GregoryCo · 18 dec 2010

Sick-Boy zei:
Omdat dat de juiste grootte is, en omdat dat werkt.
Die jongen is absoluut niks met zo'n reply...

Omdat het de juiste grootte is en werkt??
Sorry maar met uw reply is hij nog minder hoor.

Ofwel begrijp ik het verkeerd, maar headers kun je veranderen van grootte he :unsure:

Sick-Boy · 19 dec 2010

GregoryCo zei:
Omdat het de juiste grootte is en werkt??
Sorry maar met uw reply is hij nog minder hoor.

Ofwel begrijp ik het verkeerd, maar headers kun je veranderen van grootte he

Dat hij H3 ipv H1 gebruikt is toch geen ramp?
Dat is de grootte die hij nodig heeft en geen enkele browser zal daar problemen mee hebben.

@SDX: Bij een correcte website hoor je de volgorde van titels en subtitels te respecteren. Je eerste titel krijgt dus H1, subtitel H2, subsubtitel H3, ...
Via css verander je dan de grootte van de titels naargelang jouw voorkeur.

Zero Grav · 19 dec 2010

Check die code nog eens Sick-Boy, hij zet heel zijn formulier in een h3 tag om de één of andere reden, dat is het probleem. ^^
'k Wou u trouwens reppen, maar 'k moet eerst nog spreaden.

Sick-Boy · 19 dec 2010

Lol dat had ik inderdaad niet gezien.
My bad, BramVroy, maar hier wordt zo vaak zonder uitleg iets afgebroken.

-BVR- · 19 dec 2010

't Is u vergeven

adrianhates · 19 dec 2010

<h3> </h3> is gewoon op zich al een ramp..

SDX · 22 dec 2010

Dank voor de feedback mensen. Ik herbekijk het even van zodra ik wat tijd heb.
Wat betreft die h3 tags, da's een foutje en niet echt met een bewuste reden gedaan.

Archief - Zoek form met input fields naast elkaar

SDX

Legacy Member

GregoryCo

Legacy Member

SDX

Legacy Member

dendaak

Legacy Member

Sick-Boy

Legacy Member

Drone

Legacy Member

SDX

Legacy Member

little

Legacy Member

-BVR-

Legacy Member

Sick-Boy

Legacy Member

Huxley

Legacy Member

Zero Grav

Legacy Member

GregoryCo

Legacy Member

Sick-Boy

Legacy Member

Zero Grav

Legacy Member

Sick-Boy

Legacy Member

-BVR-

Legacy Member

adrianhates

Legacy Member

SDX

Legacy Member