'How to have a helper text over the input field in html?

I have the following design: UI Design

I want an input field like this i.e. having a text like Shipper Name or Contact Number on top of the input field. How can I achieve this in HTML ? I am not able to find it on the internet.

Thank you

htmlcssreactjs


Solution 1:[1]

you can use material-ui to access these kind of components without having to code it from scratch.

Their TextField looks exactly the same in the image you provided: https://mui.com/material-ui/react-text-field/

Their documentation you can follow to integrate their library on your project: https://mui.com/material-ui/getting-started/installation/

Solution 2:[2]

Use fieldset and legend

<fieldset><legend>Shipper Name</legend><input type="text"></fieldset>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zen
Solution 2 Gopal Lohar

Related Questions