Scribd Logo
Upload

Welcome to Scribd!

  • Estructura Basica Formulario

    Uploaded by

    roel aldoradin
    25 views3 pages
    The document describes the different types of form inputs in HTML including text, buttons, dates, numbers, radio buttons, checkboxes, dropdowns, file uploads, and textareas. It provides examples of how to use each type of input and attributes like required, readonly, min and max to restrict values. The form inputs allow users to enter various types of data into a form.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes the different types of form inputs in HTML including text, buttons, dates, numbers, radio buttons, checkboxes, dropdowns, file uploads, and textareas. It provides examples of how to use each type of input and attributes like required, readonly, min and max to restrict values. The form inputs allow users to enter various types of data into a form.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    25 views3 pages

    Estructura Basica Formulario

    Uploaded by

    roel aldoradin
    The document describes the different types of form inputs in HTML including text, buttons, dates, numbers, radio buttons, checkboxes, dropdowns, file uploads, and textareas. It provides examples of how to use each type of input and attributes like required, readonly, min and max to restrict values. The form inputs allow users to enter various types of data into a form.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    DOCTYPE html>
    <html lang="es">
    <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>Estructura basica de un Formulario</title>
    </head>
    <body>
    <!-- <form action="enviar.html" method="post">
    <label for="name">Nombre</label>
    <input type="text" name="" id="name">
    <button>Enviar Formulario</button>
    </form> -->

    <!-- Inputs tipo button -->


    <form action="enviar.html" method="post">
    <input type="">
    <input type="button" value="Enviar">
    <button>Enviar</button>
    <input type="submit" value="Enviar Formulario">
    <br><br><br>
    <!-- Input tipo fecha -->
    <input type="date" name="" id="">
    <input type="datetime-local" name="" id="">
    <input type="date" name="" id="">
    <input type="time" name="" id="">
    <input type="month" name="" id="">
    <input type="week" name="" id="">
    <br><br><br>
    <div>
    <label for="">Search</label>
    <input type="search" name="" id="">
    </div>
    <div>
    <label for="">Telefono</label>
    <input type="tel" name="" id="">
    </div>
    <div>
    <label for="">Email</label>
    <input type="email" name="" id="">
    </div>
    <div>
    <label for="">Password</label>
    <input type="password" name="" id="">
    </div>
    <div>
    <label for="">Url</label>
    <input type="url" name="" id="">
    </div>
    <!-- Inputs variados -->
    <input type="color" name="" id="">
    <input type="number" name="" id="">
    <input type="range" step="10" min="0" max="100" id="">
    <input type="reset" value="Restablecer">
    <input type="hidden" name="">

    <!-- Input Radio -->


    <div>
    <h2>Genero</h2>
    <label for="masculino">Masculino</label>
    <input type="radio" name="sex" id="masculino" checked
    value="masculino">
    <label for="femenino">Femenino</label>
    <input type="radio" name="sex" id="femenino" value="femenino">
    <label for="desconocido">Desconocido</label>
    <input type="radio" name="sex" id="desconocido"
    value="desconocido">
    </div>
    <!-- Input checkbox -->
    <div>
    <h2>Lenguajes que conoces</h2>
    <label for="html">HTML</label>
    <input type="checkbox" name="dw-1" id="html" value="html">
    <label for="css">CSS</label>
    <input type="checkbox" name="dw-1" id="css" value="css">
    <label for="javascritp">JavasCript</label>
    <input type="checkbox" name="dw-1" id="javascritp"
    value="javascript">
    </div>
    <!-- select -->
    <div>
    <h2>Elementos seleccionables</h2>
    <select name="lenguajes" id="" multiple> <!-- selecciona varios
    (multiple) -->
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavasCript</option>
    <option value="java">Java</option>
    </select>
    </div><br><br><br>
    <!-- SELECT por GRUPOS -->
    <div>
    <h2>Mascotas</h2>
    <select name="mascotas" id="">
    <optgroup label="4 PATAS">
    <option value="perro">Perro</option>
    <option value="gato">Gato</option>
    <option value="tigre">Tigre</option>
    <option value="leon">Leon</option>
    <option value="zorro">Zorro</option>
    </optgroup>
    <optgroup label="Aves">
    <option value="paloma">Paloma</option>
    <option value="loro">Loro</option>
    <option value="alcon">Alcon</option>
    </optgroup>
    </select>
    </div>
    <!-- DATALIST -->
    <div>
    <input type="list" list="pets">
    <datalist id="pets">
    <option value="perro"></option>
    <option value="gato"></option>
    <option value="tigre"></option>
    <option value="leon"></option>
    <option value="zorro"></option>
    <option value="paloma"></option>
    <option value="loro"></option>
    <option value="alcon"></option>
    </datalist>
    </div>
    <br><br>
    <!-- MAS ELEMENTOS PARA FORMULARIOS -->
    <div>
    <fieldset>
    <legend>Datos Personales</legend>
    <label for="name" class="">Nombres</label>
    <input type="text" id="name">
    <label for="surname" class="">Apellidos</label>
    <input type="text" id="surname">
    </fieldset>
    <input type="file" name="" id="">
    <br><br>
    <label for="fuel">Combustible</label>
    <meter id="fuel" min="0" max="100" value="10" low="30" high="75"
    optimum="50">
    </meter>
    <br><br><br>
    <label for="task">Tarea 1</label>
    <progress id="task" max="100" value="10">
    </progress>
    <br><br><br>
    <textarea name="" id="" cols="70" rows="25">Area de trabajo</textarea>
    </div><br><br>
    <!-- Atributos para formularios -->
    <div>
    <label for="name">Nombre</label>
    <input type="text" placeholder="Introduce tu nombre" id="name"
    required autofocus>
    <input type="text" readonly>
    <input type="text" disabled>
    <input type="submit" value="enviar"> <br><br>
    <input type="number" name="" id="" min="2" max="10" >
    <input type="text" minlength="5" maxlength="10" required>
    </div><br><br><br>
    <select name="numeros" id="numbers">
    <option value="uno">Uno</option>
    <option value="dos">Dos</option>
    <option value="tres" selected>Tres</option>
    </select>
    </form>
    </body>
    </html>

    You might also like