0
556
ViewsHow do I put an asterisk for mandatory fields?
how do I put a red asterisk on a mandatory field ?
For example title, location, Name, Email (for Owner section), Name,Email are required (*) and the Age and Location are optional
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)}
/>
//...
);
}
Here what I'm saying in a picture :
·
Juan Pablo Isaza
1 answers
Answer question0
Give all of your label elements a class of required and add the following to your CSS:
.required::after {
content: " *";
color: red;
}
working example:
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>
·
Juan Pablo Isaza
Report
Answer question