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 su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.
Un formulario es la sección de un documento que contiene una serie de campos de entrada, como campo de texto, contraseña, casilla de verificación, etc. El formulario de interfaz de usuario semántica se utiliza para crear formularios atractivos utilizando clases de interfaz de usuario semántica. Es muy fácil diseñar formas atractivas.
El estado de campo de solo lectura del formulario de interfaz de usuario semántica se usa para hacer que los campos de entrada individuales sean de solo lectura. Si un campo de entrada es de solo lectura, su contenido no se puede cambiar, pero se puede copiar y resaltar.
Atributo utilizado del estado del campo de solo lectura del formulario de interfaz de usuario semántica:
- readonly: este atributo se utiliza para hacer que los campos de entrada del formulario sean de solo lectura.
Sintaxis:
<div class="ui form">
...
<input placeholder="Read Only" readonly="" type="text">
...
</div>
Ejemplo 1: En este ejemplo, describiremos el uso del estado de campo de solo lectura del formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Read-Only Field State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Read-Only Field State</h3> </div> <form class="ui container form"> <div class="field"> <label>Username</label> <input type="text" name="username" readonly="" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="text" name="pwd" readonly="" placeholder="Enter Password"> </div> <button class="ui button" type="submit"> Submit </button> </form> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos el uso del estado de campo de solo lectura del formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Read-Only Field State </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Read-Only Field State</h3> </div> <form class="ui container form"> <div class="three fields"> <div class="field"> <label>First Name</label> <input type="text" name="fname" readonly="" placeholder="Enter First Name"> </div> <div class="field"> <label>Second Name</label> <input type="text" name="sname" readonly="" placeholder="Enter Second Name"> </div> <div class="field"> <label>Last Name</label> <input type="text" name="lname" readonly="" placeholder="Enter Last Name"> </div> </div> <div class="two fields"> <div class="field"> <label>Email Id</label> <input type="email" name="email" readonly="" placeholder="Enter Email Id"> </div> <div class="field"> <label>Mobile No</label> <input type="number" name="number" readonly="" placeholder="Enter Mobile No"> </div> </div> <div class="field"> <label>Short Notes</label> <textarea readonly=""></textarea> </div> <button class="ui button right" type="submit"> Submit </button> </form> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#read-only-field
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA