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 diferentes elementos geniales 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 y casilla de verificación, etc.
Ejemplo 1: este ejemplo crea un formulario de inicio de sesión simple.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<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>
<div class="ui container">
<h2>Log In</h2>
<form class="ui form">
<div class="field">
<label>Username</label>
<input type="text" name="Username"
placeholder="Username">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password"
placeholder="Password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0"
class="hidden">
<label>Remember Me</label>
</div>
</div>
<button class="ui button" type="submit">
Log In
</button>
</form>
</div>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo crea un formulario que contiene campos de entrada colocados en paralelo.
html
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <div class="ui form"> <div class="fields"> <div class="field"> <label>Name</label> <input type="text" placeholder="Name"> </div> <div class="field"> <label>E-mail</label> <input type="email" placeholder="E-mail"> </div> <div class="field"> <label>Password</label> <input type="password" placeholder="Password"> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 3: este ejemplo crea un área de texto.
html
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <div class="ui form"> <div class="field"> <label>Enter Text</label> <textarea rows="6"></textarea> </div> </div> </div> </body> </html>
Nota: puede omitir el atributo de filas y obtener un área de texto de tamaño estándar.
Producción:
Ejemplo 4: este ejemplo crea la casilla de verificación. Hay una variedad de estilos de casillas de verificación presentes en semantic-ui, como la casilla de verificación estándar, alternar y deslizar.
Y para esto, necesita importar la biblioteca jQuery.
$('.ui.checkbox').checkbox();
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</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>
<div class="ui container">
<div class="ui form">
<h2>Checkbox</h2>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox"
tabindex="0" class="hidden">
<label>Checkbox</label>
</div>
</div>
<h2>Toggle</h2>
<div class="inline field">
<div class="ui toggle checkbox">
<input type="checkbox"
tabindex="0" class="hidden">
<label>Toggle</label>
</div>
</div>
<h2>Slider</h2>
<div class="inline field">
<div class="ui slider checkbox">
<input type="checkbox"
tabindex="0" class="hidden">
<label>Slider</label>
</div>
<label></label>
</div>
</div>
</div>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Ejemplo 5: este ejemplo crea el botón de radio. Para esto, necesita una biblioteca jQuery importada.
$('.ui.radio.checkbox').checkbox();
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 20px;" class="ui container">
<div class="ui form">
<h2>Inline Radio Button</h2>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender"
checked="" tabindex="0"
class="hidden">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender"
tabindex="0" class="hidden">
<label>Female</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender"
tabindex="0" class="hidden">
<label>Rather not Say</label>
</div>
</div>
</div>
<h2>Grouped Radio Button </h2>
<div class="grouped fields">
<label for="branch">Select your Branch</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="branch"
checked="" tabindex="0" class="hidden">
<label>CSE</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="branch"
tabindex="0" class="hidden">
<label>IT</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="branch"
tabindex="0" class="hidden">
<label>ECE</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="branch"
tabindex="0" class="hidden">
<label>ME</label>
</div>
</div>
</div>
</div>
</div>
<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>
<script>
$('.ui.radio.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Ejemplo 6: este ejemplo crea una lista desplegable. Para esto, necesita importar la biblioteca jQuery.
$(function() {
$('.ui.dropdown').dropdown();
});
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 20px;" class="ui container">
<label>Choose Language</label>
<div class="ui selection dropdown">
<input type="hidden" name="language">
<i class="dropdown icon"></i>
<div class="default text">Choose Language</div>
<div class="menu">
<div class="item" data-value="0">C++</div>
<div class="item" data-value="1">Java</div>
<div class="item" data-value="2">Python3</div>
</div>
</div>
</div>
<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>
<script>
$(function() {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
Producción:
Ejemplo 7: este ejemplo crea el menú desplegable Selección múltiple. Para esto, necesita importar la biblioteca jQuery.
$(function() {
$('.ui.dropdown').dropdown();
});
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 50px;" class="ui container">
<div class="field">
<label>Programming Language</label>
<select multiple="" class="ui dropdown">
<option value="">Select Programming Language</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="py3">Python3</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
<option value="js">JavaScript</option>
</select>
</div>
</div>
<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>
<script>
$(function() {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
Producción:
Ejemplo 8: Este ejemplo crea el estado de la declaración. El estado puede ser cualquiera como éxito, error, advertencia.
html
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div style="margin-top: 20px;" class="ui container"> <h2>State</h2> <div class="ui form success"> <div class="field"> <label>Enter email to get latest news</label> <input type="email" placeholder="joe@schmoe.com"> </div> <div class="ui success message"> <div class="header">Success</div> <p>You're all signed up for the newsletter.</p> </div> <div class="ui submit button">Submit</div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Nota:
- Puede reemplazar éxito con error o advertencia para mostrar ese estado.
- Puede usar una clase pequeña, pequeña, grande, mediana o enorme para cambiar el tamaño del formulario.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA