¿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>