How do I format two different forms in the same stylesheet?-CodePudding

Looks simple but I'm losing my head.

I want to format two different forms independently. Here is the example.

<h1>FORM 1</h1>
<form>
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>
<br>
<h1>FORM 2</h1>
<form id="form2">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>

/* Form 1 style */
input[type="text"],
input[type="password"],
input[type="email"],
select{
    display:block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Form 2 style? */

input[type="text"],
input[type="password"],
input[type="email"],
select{
    display:block;
    width: 50%;
    margin-top: 1px;
    margin-bottom: 1px;
}

https://jsfiddle.net/dtpoze0c/

I really appreciate any help.

CodePudding user response：

You can simply use the class or id CSS selector, so add an id like you did on the second to the first one: <form id="form1">

And then use it to create your style:

/* This will only affect the form with the form1 id */
#form1 input[type="text"],
#form1 input[type="password"],
#form1 input[type="email"],
#form1 select {
    display: block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

You can see some doc about id here: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors

CodePudding user response：

/* Form 1 style */
.form1 input[type="text"],
.form1 input[type="password"],
.form1 input[type="email"],
.form1 select{
    display:block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Form 2 style? */

.form2 input[type="text"],
.form2 input[type="password"],
.form2 input[type="email"],
.form2 select{
    display:block;
    width: 50%;
    margin-top: 1px;
    margin-bottom: 1px;
}

<h1>FORM 1</h1>
<form >
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>
<br>
<h1>FORM 2</h1>
<form  id="form2">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>

    <input type="submit" value="Register"/>
</form>