Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La interfaz de usuario semántica nos brinda una manera muy fácil de diseñar la aplicación web en lugar de usar CSS. Los formularios de interfaz de usuario semántica nos proporcionan una forma estructurada de mostrar un conjunto de campos de entrada relacionados. Ofrece formularios en diferentes variaciones, tipos, grupos y estados.
En este artículo, aprenderemos sobre el contenido del área de texto del formulario de interfaz de usuario semántica junto con la implementación y el código de ejemplo. El contenido del área de texto del formulario de interfaz de usuario semántica nos proporciona una forma de permitir la entrada extendida del usuario. Podemos hacer un área de texto de tamaño específico configurando filas para atribuir para especificar la altura del área de texto.
Clase de contenido del área de texto del formulario de interfaz de usuario semántica:
- campo: esta clase se utiliza para representar el campo de entrada.
Nota: use la etiqueta HTML <textarea> para proporcionar un área de texto en el formulario para habilitar la entrada de usuario extendida.
Sintaxis:
<div class="ui form">
<div class="field">
<textarea></textarea>
</div>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso del contenido del área de texto del formulario de interfaz de usuario semántica.
HTML
<html> <head> <title>Semantic-UI Form Text Area Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Form Text Area Content</strong> <br><br> <div class="ui form"> <div class="field"> <label>Textarea:</label> <textarea></textarea> </div> </div> </div> </center> </body> </html>
Producción:
Contenido del área de texto del formulario de interfaz de usuario semántica
Ejemplo 2: si queremos crear un área de texto de tamaño específico, podemos usar el atributo de filas de textarea como se muestra en el siguiente ejemplo.
HTML
<html> <head> <title>Semantic-UI Form Text Area Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Form Text Area Content</strong> <br><br> <div class="ui form"> <div class="field"> <label>Textarea :</label> <textarea rows="20"></textarea> </div> </div> </div> </center> </body> </html>
Salida: Podemos observar un área de texto de 20 filas en la salida.
Contenido del área de texto del formulario de interfaz de usuario semántica
Referencia : https://semantic-ui.com/collections/form.html#text-area
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA