articles

Home / DeveloperSection / Articles / how to design a form with required field stylish mark

how to design a form with required field stylish mark

Anonymous User 1869 22-May-2018

Introduction:

In this article I will explain to you design Required field mark in textbox using css or design stylish registration form with example.

Description:

In the following below example i have designed stylish registration form and with marking required field.

Step-1: write the following below html code for design registration form.

index.cshtml

@{

    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
    <form role="form" style="width:400px; margin: 0 auto;">
        <h1>Registration Form</h1>
        <div class="required-field-block">
            <input type="text" placeholder="First Name" class="form-control">
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>
        <div class="required-field-block">
            <input type="text" placeholder="Middle Name" class="form-control">
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>
        <div class="required-field-block">
            <input type="text" placeholder="Last Name" class="form-control">
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>
        <div class="required-field-block">
            <input type="text" placeholder="Email" class="form-control">
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>
        <input type="text" placeholder="Phone" class="form-control">
        <div class="required-field-block">
            <textarea rows="3" class="form-control" placeholder="Address"></textarea>
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>
        <button class="btn btn-primary">Submit</button>
    </form>
</div>

<script>
    $(function () {
        $('.required-icon').tooltip({
            placement: 'left',
            title: 'Required field'
        });
    });

</script>

Step-2: write the following below css code for apply style on your registration form.

Style.css

input, textarea, button { margin-top:10px }


/* Required field START */

.required-field-block {
    position: relative;
}

.required-field-block .required-icon {
    display: inline-block;
    vertical-align: middle;
    margin: -0.25em 0.25em 0em;
    background-color: #E8E8E8;
    border-color: #E8E8E8;
    padding: 0.5em 0.8em;
    color: rgba(0, 0, 0, 0.65);
    text-transform: uppercase;
    font-weight: normal;
    border-radius: 0.325em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background 0.1s linear;
    -moz-transition: background 0.1s linear;
    transition: background 0.1s linear;
    font-size: 75%;
}

.required-field-block .required-icon {
    background-color: transparent;
    position: absolute;
    top: 0em;
    right: 0em;
    z-index: 10;
    margin: 0em;
    width: 30px;
    height: 30px;
    padding: 0em;
    text-align: center;
    -webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.required-field-block .required-icon:after {
    position: absolute;
    content: "";
    right: 1px;
    top: 1px;
    z-index: -1;
    width: 0em;
    height: 0em;
    border-top: 0em solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 0em solid transparent;
    border-right-color: inherit;
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

.required-field-block .required-icon .text {
 color: #B80000;
 font-size: 26px;
 margin: -3px 0 0 12px;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #0581fd;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Required field END */

Now Press F5 and see output:

how to design a form with required field stylish mark

thanks for reading my article.



Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By