como fazer para que ao selecionar input radio abra um input text para digitar um e-mail

CSS

JavaScript

HTML5

JavaScript Web

08/09/2022

Pretendo realizar a construção de uma tela de login, estou preso nessa em especifico, clique no rádio, abra um novo input para adicionar um e-mail ou campo de texto preciso, tentei ver em JS porém não consegui realizar , obs: agora disponível, se pode detalhar muito.
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recuperação de Acesso</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.typekit.net/wes7qed.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>

<body>
    <main>
        <section class="login">
            <img src="IMAGENS/logo 2.svg" class="login_logo">

            <h1 class="login_title">Recuperação de Acesso</h1>

            <h2 class="login_subtitle">Por que você não consegue acessar o sistema</h2>


            <div class="email-senha">
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="radio" id="radio" onClick="radio">
                        Esqueci minha senha
                    </label>
                </div>
                <div class="recu1">
                    <label class="login_label">
                        <span>Digite seu e-mail</span>
                        <input type="text" name="username" class="input">
                    </label>
                </div>
            </div>


            <div class="cpf-email">
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="radio" id="radio">
                        Esqueci meu e-mail de acesso
                    </label>
                </div>
                <div class="recu2">
                    <label class="login_label">
                        <span>CPF</span>
                        <input type="text" name="username" class="input">
                    </label>
                    <label class="login_label">
                        <span>Número</span>
                        <input type="text" name="username" class="input">
                    </label>
                </div>
            </div>

            <div class="outro-motivo">
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="radio" id="radio">
                        Outro motivo
                    </label>
                </div>
                <div class="recu3">
                    <label class="login_label">
                        <span>informe o ocorrido para entrarmos em contato</span>
                        <input type="text" name="username" class="input">
                    </label>
                    <label class="login_label">
                        <span>E-mail</span>
                        <input type="text" name="username" class="input">
                    </label>
                </div>
            </div>

            <div class="wrapper">
                <button type="button" class="login__button">
                    Recuperar
                </button>
                <button type="button" class="login__butto">
                    <a href="/login SIGE/html.html"> Cancelar</a>
                </button>
                <a>2022 SIGE UniFap</a>
                <a>Centro Universitário Paraíso</a>
            </div>
        </section>


    </main>


    <script src="js.js"></script>
</body>

</html>


@import url("https://use.typekit.net/wes7qed.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: nunito, sans-serif;
}

:root {
    --white: #FFF;
    --whitesmoke: #F9F9F9;
    --light-grey: #ECECEC;
    --grey: #C4C4C4;
    --medium-grey: #A7A7A7;
    --deep-grey: #343434;
    --black: #000000;
    --blue: #1B77F3;
    --red: #CF3C3F;
}



body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    border-radius: 10px;
    width: 450px;
    height: 100%;
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /*função clamp serve para definir um min, medio e max de uma variavel, funciona em font, padding e margin entre outras*/
    padding: clamp(35px, 8%, 70px);
}

/*responsividade colocar em porcentagem*/
.login_logo {
    width: 100%;
 /*   margin-bottom: 10px;*/
    margin-top: 150px;
}

.login_title {
    color: #032A4A;
    font-size: 30px;
    margin-bottom: 20px;
    text-align: center;
}

.login_subtitle {
    color: #032A4A;
    font-size: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.form-check-label {
    width: 100%;
    margin-bottom: 25x;
    font-size: 13px;
    font-weight: 700;
    color: #032A4A;
}

.form-check{
    padding: 3.5%;
    margin-bottom: 3.5%;
}

.form-check-input {
    font-size: 20px;
    font-weight: 600;
}

.form-check-label span {
    position: absolute;
    font-size: 13px;
    font-weight: 700;
    color: #032A4A;
}

.login__button {
    width: 100%;
    height: 43px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2569C1;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 15px;
    color: #F7F7F7;
}
.login__butto {
    width: 100%;
    height: 43px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F7F7F7;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 15px;
    color: #2569C1;
}


.wrapper a {
    font-size: 00.8em;
    text-decoration: none;
    color: #032A4A;
    font-weight: 700;
    padding: 2px;
}

.wrapper {
    /*margin-bottom: 10px;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrapper button {
    font-weight: 700;
    font-size: 20px;
    /*color: #FDFDFD;*/
}

/*input email*/


.input {
    width: 100%;
    background-color: var(--light-grey);
    /*como deixar uma bordar ocupando espaço mas transparente usar a funçaõ rgba(0,0,0,1)*/
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 5px;
    outline: none;
    font-size: 10px;
    padding: 25px 10px 10px;
    font-weight: 600;
    color: var(--deep-grey)
}
.login_label .span-active {
    font-size: 8px;
    margin: 8px 10px;
}
.login_label {
    width: 100%;
    display: block;
    padding: 1%;
}
.login_label span {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #032A4A;
    margin: 20px;
    cursor: text;
    transition: all 200ms ease;
}

/*css dos inputs, verificar posteriormente oq n precisa*/

.outro-motivo{
    width: 100%;
    margin-bottom: 10px;
}

.cpf-email{
    width: 100%;
}

.email-senha{
    width: 100%;
}

.recu1 .recu2 .recu3{
    display: none;
}


const inputs = document.querySelectorAll('input');
const button = document.querySelector('.login__button');


const handleFocus = ({
    target
}) => {
    const span = target.previousElementSibling;
    span.classList.add('span-active');
}

const handleFocusOut = ({
    target
}) => {
    if (target.value === '') {
        const span = target.previousElementSibling;
        span.classList.remove('span-active');
    }
}

const handleChange = () => {
    const [username, password] = inputs;

    if (username.value && password.value.length >= 8) {
        button.removeAttribute('disabled');
    } else{
        button.setAttribute('disabled','');
    }
}

inputs.forEach((input) =>
Joely Silva

Joely Silva

Curtidas 0

Respostas

Joely Silva

Joely Silva

08/09/2022

Explicando melhor, é um form de recuperação de senha, onde o usuário ao clicar na opção em especifico, abrirá uma caixa para digitar e prosseguir com a recuperação.
GOSTEI 0
POSTAR