Mudar a largura do formulário de entrada em HTML para 100%

eu tenho este formulário HTML que anteriormente eu tinha a largura dos campos de entrada a ser 100% mas eu fiz algumas mudanças e não sabia o que causou a mudança.

    <form action="/forms.php" method="post">
    <div>
        <input type="text" id="name" name="fullname" placeholder="Name" width:100%>
    </div>
    <div>
        <textarea id="msg" name="message" placeholder="Description"></textarea>
    </div>
    <div>
        <input type="text" name="emailaddress" placeholder="Email Address">
        <input type="text" name="contactno" placeholder="Contact Number">
    </div>
        <input type="submit" name="send" value="Submit" id="subsubmit" class="btn2"/>
    </form>

eu já adicionei o seguinte CSS no meu HTML

.input {
width: 100%;
}

.textarea {
width: 100%;
}

.form {
width: 100%;
}

Ligação de violino - https://jsfiddle.net/v83g4003/

 0
Author: user9244727, 2018-01-20

2 answers

input textarea form as marcas HTML não são uma classe. Você usou . em CSS antes de tags HTML, o que o indica como uma classe e é por isso que o seu css não está funcionando.

Remova apenas . no seu css

Excerto Da Pilha

input {
  width: 100%;
}

textarea {
  width: 100%;
}

form {
  width: 100%;
}
<form action="/forms.php" method="post">
  <div>
    <input type="text" id="name" name="fullname" placeholder="Name" width:100%>
  </div>
  <div>
    <textarea id="msg" name="message" placeholder="Description"></textarea>
  </div>
  <div>
    <input type="text" name="emailaddress" placeholder="Email Address">
    <input type="text" name="contactno" placeholder="Contact Number">
  </div>
  <input type="submit" name="send" value="Submit" id="subsubmit" class="btn2" />
</form>
 2
Author: Bhuwan, 2018-01-20 16:24:36

Dá uma vista de olhos neste jsfiddle editado: jsFiddle exemplo

Também usar width:100% como um atributo html não irá funcionar, no html terá de o fazer como 'width="100%"'. Embora usar um CSS é melhor, uma vez que separa o seu design da sua lógica (como você provavelmente já sabia)

 0
Author: qvotaxon, 2018-01-20 16:29:12