CSS Bootstrap container

Frank K Hosaka · Outubro 28

Estou estudando JavaScript para iniciantes com a ajuda do monitor de 30 polegadas. Para botar o manual na tela, eu uso o navegador e o endereço ler.amazon.com.br.

O JavaScript é bacana! Comecei a aprender a usar a função addEventListener. O autor tem razão, o único jeito de aprender alguma coisa é só fazendo os exercícios que o livro propõe.

Agora estou estudando formulários. O problema é que o autor não usa CSS, pelo menos até onde eu li o manual.

Assim, eu tomei a iniciativa de incluir o CDN do Bootstrap 5.3.3.

Finalmente eu consegui criar uma moldura para o formulário! A classe form-control pode ser usado tanto no <input> bem como no próprio <form>

Para tirar o formulário do canto esquerdo, basta usar um <div class="container">. Olha só que bacana:

arquivo index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <title>Manipulando Campos</title>
        <script>
            document.addEventListener('DOMContentLoaded', function() 
            {
                meuFormulario.addEventListener('submit',function(event)
                {
                    mensagem=""
                    event.preventDefault()
                    if(nome.value=="")
                    {
                        mensagem='o Nome não pode estar vazio\n'
                    }
                    if(!email.value.includes('@') || !email.value.includes('.'))
                    {
                        mensagem=mensagem+'email inválido\n'
                    }
                    if(mensagem!=="")
                    {
                        alert(mensagem)
                    }
                })
            })
        </script>
    </head>
    <body>
        <div class="container mt-5 w-25">
        <form id="meuFormulario" class="form-control">
            <label for="nome" class="form-label">Nome:</label>
            <input id="nome" name="nome" class="form-control">
            <p></p>
            <label for="email" class="form-label">Email:</label>
            <input id="email" name="email" class="form-control">
            <p></p>
            <input type="checkbox" id="meuCheckBox" name="meuCheckBox" class="form-check-input">
            <label for="meuCheckBox" class="form-check-label">Aceito os termos</label>
            <p></p>
            <label for="meuSelect" class="form-label">Escolha uma opção:</label>
            <select id="meuSelect" name="meuSelect" class="form-select">
                <option value="opcao1">Opção 1</option>
                <option value="opcao2">Opção 2</option>
                <option value="opcao3">Opção 3</option>
            </select>
            <p></p>
            <input type="submit" class="btn btn-primary">
        </form>
        </div>
    </body>
</html>

Entrar

CSS Bootstrap container

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades