🥇 ▷ Guía sobre cómo crear un botón de radio en HTML para principiantes

Tutorial sobre cómo hacer botones de radio en HTML fácilmente

El botón de opción es uno de los componentes de la programación HTML. Este componente se usa con mayor frecuencia para completar formularios en línea, como encuestas, selección de carreras, religión, género, etc.

Una regla importante que existe en el componente de botón de radio es que el usuario solo puede elegir una opción de varias otras opciones. Por lo tanto, si desea que se pueda seleccionar más de una selección, los botones de radio no son la respuesta.

Cómo crear un botón de opción en HTML

Crear botones de radio en HTML es muy fácil. Si está acostumbrado a crear formularios en HTML, crear un botón de opción definitivamente será muy fácil para usted. Inmediatamente, aquí hay algunas formas que puede usar para crear botones de opción en HTML.

1. El primer camino

La primera forma de hacer un botón de radio es el método más básico o el método más utilizado por muchas personas. En el botón de radio, el usuario solo puede elegir uno, en contraste con la casilla de verificación que puede seleccionar más de uno.

Debido a que el botón de radio es una opción en el formulario, el primer paso para crear un botón de radio es usar la etiqueta

. El siguiente es un ejemplo del uso de un script de botón de radio en HTML.

<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="proses.php" method="get">
<p>Jenis Kelamin</p>
<p><input type="radio" name="jenis_kelamin" value="pria" />Pria</p>
<p><input type="radio" name="jenis_kelamin" value="perempuan" />Perempuan</p>
<input type="submit" name="tombol" value="Kirim" />
</form>
</body>
</html>

Al escribir la etiqueta

como de costumbre, le siguen las acciones y los métodos utilizados. Luego, ingresa la etiqueta seguida de los otros atributos, a saber:

type=’radio’ se utiliza para escribir el botón de opción. Si no ingresa esto, el botón de opción no aparecerá. No debe ingresar solo el tipo, porque cada uno tiene su propia función. El nombre se usa para definir que las opciones del botón de radio están en el mismo grupo. Si cambia el nombre, la selección del botón de radio estará automáticamente en un grupo diferente. valor se utiliza para asignar un valor a cada entrada seleccionada. Las palabras Masculino y Femenino son los caracteres que se muestran en el navegador que son la descripción de la entrada.

La imagen a continuación es el resultado de visualización del script anterior. ¡Buena suerte!

hacer botones de radio

2. Segunda vía (atributo marcado)

Además del primer método que utiliza atributos básicos para crear botones de radio, en este segundo método puede agregar un nuevo atributo, a saber, el atributo marcado. Este atributo marcado se usa para asignar un valor predeterminado a la entrada que se selecciona automáticamente cuando se muestra el formulario.

Entonces, cuando abra el formulario, el botón de opción mostrará automáticamente una opción que se haya marcado. Sin embargo, no se preocupe, aún puede elegir otra opción si esa no es su elección. El siguiente es un ejemplo del uso de este segundo script.

<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="proses.php" method="get">
<p>Jenis Kelamin</p>
<p><input type="radio" name="jenis_kelamin" value="pria" checked='checked' />Pria</p>
<p><input type="radio" name="jenis_kelamin" value="perempuan" />Perempuan</p>
<input type="submit" name="tombol" value="Kirim" />
</form>
</body>
</html>

Puedes ver la diferencia con el primer método. En este segundo método, se aumenta el atributo en la opción Hombre, a saber, marcado = ‘marcado’. Bueno, entonces, si desea que el formulario se muestre automáticamente cuando se accede a él, simplemente agregue el atributo marcado como en el ejemplo anterior.

La imagen de abajo es el resultado del script de arriba. ¡Buena suerte!

hacer un botón de radio de la segunda manera

3. Tercer método (atributo deshabilitado)

Esta tercera forma es una forma de desactivar la función de la entrada. Este atributo generalmente se combinará con javascript. Aquí se explica cómo usar el script con el atributo deshabilitado.

<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="proses.php" method="get" >
<p>Jenis Kelamin</p>
<p><input type="radio" name="jenis_kelamin" value="pria" checked='checked' />Pria</p>
<p><input type="radio" name="jenis_kelamin" value="perempuan" disabled='disabled' />Perempuan</p>
<input type="submit" name="tombol" value="Kirim" />
</form>
</body>
</html>

Bueno, para deshabilitar su elección, simplemente agregue el atributo deshabilitado como en el ejemplo anterior. El script anterior es solo un ejemplo, puede agregar javascript para hacerlo más perfecto. El siguiente es el resultado del script anterior.

hacer un botón de radio de la tercera manera

Entonces, este artículo analiza cómo hacer botones de opción en HTML. Elija el método que necesita, solo ajústelo a sus necesidades. Esperemos que este artículo pueda ser útil y útil para usted. Gracias

Tabla de Contenido