En este artículo, aprenderemos cómo tomar dos entradas en una sola línea en HTML. HTML admite varios tipos de entradas como texto, contraseña, fecha y hora, fecha, hora, semana, número, correo electrónico y mucho más. Hay varias condiciones en las que tenemos que tomar múltiples entradas en una sola línea o una al lado de la otra y esto se puede lograr mediante .input-group y elemento en línea. El elemento en línea no ocupa toda la línea, sino que ocupa tanto ancho como sea necesario.
Ejemplo 1: Tomando entrada en dos campos consecutivos.
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="input-group"> <!-- declaration for first field --> <input type="text" class="form-control input-sm" value="input 1 " /> <!-- reducong the gap between them to zero --> <span class="input-group-btn" style="width:0px;"></span> <!-- declaration for second field --> <input type="text" class="form-control input-sm" value="input 2" /> </div> </body> </html>
Producción:
Ejemplo 2: Tomando la entrada como dos campos en una línea.
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <form class="form-inline" action="/action_page.php"> <label for="email">Email:</label> <input type="email" id="email" placeholder="Enter email" name="email"> <label for="pwd">Password:</label> <input type="password" id="pwd" placeholder="Enter password" name="pswd"> </form> </body> </html>
Producción:
Ejemplo 3: Tomando entrada en una línea con etiquetas mixtas.
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="input-group"> <span class="input-group-text">Between</span> <input type="text" class="form-control" placeholder="Type something..." /> <span class="input-group-text" style="border-left: 0; border-right: 0;"> and </span> <input type="text" class="form-control" placeholder="Type something..." /> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatrathi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA