Nyheter i Android, Telefoner, Prylar Och Recensioner

Hur man skapar ett staplat formulär i CSS

CSS tillhör en unik klass av språk, kända som stilmallsspråk. Det används främst för att definiera din webbsidas presentation. Medan HTML låter dig specificera hur din sida ska vara strukturerad, är det CSS som används för att utforma den. Annars kommer du att få en ganska oattraktiv webbplats.

Att fokusera på CSS är ett av de bättre sätten att förbättra din webbplatss attraktionskraft, särskilt när det gäller att förbättra din användarupplevelse. På så sätt kan du också öka din trafik. Till att börja med kan du använda en staplad form.

Vad är ett staplat formulär?

En staplad form låter dig skapa en specialiserad form där du kan placera dina etiketter och inmatningar ovanpå varandra, istället för att placera dem i ett horisontellt mönster.

Så här kan du göra det.

Koda HTML

Använd HTML-elementet,

, för att behandla din information. Lägg till etiketter för de relevanta fälten och tilldela relevanta inmatningsfält. I det här exemplet ber vi användare att ange sitt fullständiga namn och e-postadress med formulärets inmatningstyp text, medan en rullgardinsmeny skapas via välj id för att hjälpa dem att välja sin bransch.


<!DOCTYPE html>
<html>
<body>
<h3>What Is a Stacked Form?</h3>
<p>Here's how you create a stacked form.</p>
<div class="container">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="firstname" placeholder="Type your full name">
<label for="email">Email Address</label>
<input type="text" id="email" name="email" placeholder="Type your email ">
<label for="dept">Department</label>
<select id="country" name="country">
<option value="IT">Information Technology</option>
<option value="CS">Customer Support</option>
<option value="Sales">Sales</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>

Men att köra denna del av kod kommer bara att producera en intetsägande form utan att stapla fälten vertikalt. Och det är där du måste lägga till CSS.

Relaterad  Det går inte att starta Windows Subsystem för Android: Hur man åtgärdar felet “Virtualization Not Enabled” på Windows 11

Koda CSS-delen

Skapa nu en separat stilmall och lägg till den i din HTML före body-taggen:

<head> <link rel="stylesheet" href="https://www.makeuseof.com/create-stacked-form-css/StackedForm_CSSPart.css"> </head>

Välj sedan din HTML-kropp, inmatningstyper och behållare och stil dem genom CSS. Detta kommer att inkludera att experimentera med olika CSS-egenskaper, såsom teckensnittsfamilj, bredd, utfyllnad, marginal, display, ram, etc, och lägga till dina föredragna värden. På så sätt kommer du att få en staplad form som passar dina exakta preferenser. Här är ett exempel.


body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}

Kontrollera utgången nedan.

Nu kan du skapa ett staplat formulär i CSS

Med den här artikeln har du lärt dig hur du skapar ett staplat formulär i CSS. Med övning kommer du att kunna förfina dina formulär och göra din webbplats mer användarvänlig.

Namnet på programmeringsspelet är “övning”. Finslipa dina CSS-kunskaper dag ut och dag in med utställningsprojekt för att bli en snygg webbdesigner och mer effektiv webbutvecklare.

Om författaren

Usman Ghani (4 artiklar publicerade)

Usman är en innehållsmarknadsförare som har hjälpt flera företag med organisk tillväxt på digitala plattformar. Han gillar både programmering och skrivande, vilket gör att tekniskt skrivande är något han tycker mycket om. När han inte jobbar tycker Usman om att titta på tv-program, följa cricket och läsa om dataanalys.

Mer från Usman Ghani

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!

Relaterad  Unika utmaningar med att hitta en lägenhet i New York City

Klicka här för att prenumerera

Rekommenderad:

Table of Contents