doação de animais

[Davidkds99]

DOCTYPE html>

<title>Doação de Animais</title> <title>Doação de Animais</title>

🐈 Doação de Animais 🐕

---

audio

coelho adulto femea
idade: 2 anos
cor: branco
temperamento: dócil, adora carinho e colo
saúde: vacinado, vermifugado e castrado
observações: vive em apartamento, acostumado com crianças e outros animais

<br>
<picture>
    <source media="(max-width: 300px )" srcset="Nome_200.jpg" type="image/jpg">
    <source media="(max-width: 400px )" srcset="Nome_300.jpg" type="image/jpg">
    <source media="(max-width: 500px )" srcset="Nome_400.jpg" type="image/jpg">
    <img src="Nome_500.jpg" alt="Imagem maior">
</picture>
<p>(preencha o forms para adquiri-lo)</p>
<br><br>
<p>calopsita macho
    <br>
    idade: 1 ano
    <br>
    cor: amarelo e branco
    <br>
    temperamento: dócil, adora carinho e colo
    <br>
    saúde: vacinado e vermifugado
    <br>
    observações: asas cortadas</p>   
<br>
(preencha o forms para adquiri-lo)
<img src="calopsita_linda_500.jpg" alt="Adote-me!">

<form id="cadastroForm" action="processa.php" method="post">
    <fieldset>
        <legend>Cadastro de Usuário</legend>

        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required><br><br>

        <label for="telefone">Telefone:</label>
        <input type="text" id="telefone" name="telefone" required><br><br>

        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="senha">Senha:</label>
        <input type="password" id="senha" name="senha" required><br><br>

        <label for="genero">Sexo:</label>
        <select id="genero" name="sexo">
            <option value="masc">Masculino</option>
            <option value="fem">Feminino</option>
        </select><br><br>

        <label for="msg">Mensagem:</label><br>
        <textarea id="msg" name="msg" rows="4" cols="40"></textarea><br><br>

        <label>
            <input type="checkbox" id="aceito" name="aceito"> Aceito os termos
        </label><br><br>

        <button type="submit">Enviar</button>
        <button type="reset">Limpar</button>

        <p id="mensagemErro" class="erro"></p>
    </fieldset>
</form>

<script>
    document.getElementById("cadastroForm").addEventListener("submit", function(event) {
        let erros = [];

        const nome = document.getElementById("nome").value.trim();
        const telefone = document.getElementById("telefone").value.trim();
        const email = document.getElementById("email").value.trim();
        const senha = document.getElementById("senha").value;
        const aceito = document.getElementById("aceito").checked;

        const telefoneRegex = /^\d{8,}$/;
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (nome === "") {
            erros.push("O campo Nome é obrigatório.");
        }

        if (!telefoneRegex.test(telefone)) {
            erros.push("Telefone deve conter ao menos 8 números.");
        }

        if (!emailRegex.test(email)) {
            erros.push("E-mail inválido.");
        }

        if (senha.length < 6) {
            erros.push("A senha deve conter no mínimo 6 caracteres.");
        }

        if (!aceito) {
            erros.push("Você deve aceitar os termos.");
        }

        if (erros.length > 0) {
            event.preventDefault();
            document.getElementById("mensagemErro").innerHTML = erros.join("<br>");
        }
    });
</script>

Órgão parceiro:

A SUIPA, localizada na Av. Dom Hélder Câmara, 1801 - Benfica, Rio de Janeiro, recolhe animais de rua há anos.

</table>

<OL type=1>
    <LI> Abaixo exemplo lista não ordenada
    <UL type=square>
    <LI> Dados da lista não ordenada
    <LI> Linha dois da lista
    </UL>

nome do animal	cão ou gato?	cor da pelagem	castrado?	idade
pepita	gato	branco	sim	10 anos
sol	cão	tigrado	não	2 anos
lua	gato	preto	sim	7 anos
nina	cão	caramelo	sim	4 anos