¿Cómo pongo un asterisco rojo en un campo obligatorio? Por ejemplo, el title
, location
, el Name
, el Email
(para la sección Owner
), el Name
y el Email
son obligatorios (*) y la Age
y la Location
son opcionales.
export default function App() { // ... return ( <div className="flex flex-col"> <form onSubmit={handleSubmit}> <span className="mr-3 h-6 text-md font-bold leading-8 text-gray-500"> Title: </span> <input type="text" value={title} placeholder="title" onChange={(e) => setTitle(e.target.value)} /> <span className="mr-3 h-6 text-md font-bold leading-8 text-gray-500"> Location: </span> <input type="text" value={location} placeholder="Location" onChange={(e) => setLocation(e.target.value)} /> //... ); }
Asigne a todos los elementos de su etiqueta una clase de required
y agregue lo siguiente a su CSS:
.required::after { content: " *"; color: red; }
ejemplo de trabajo:
form { display: flex; flex-direction: column; width: 300px; } .required::after { content: " *"; color: red; }
<form> <label class="required" for="name">Name</label> <input id="name" class="field req" type="text" required> </form>