how to auto fill like @gmail.com in html form

Question

i have a form where every email is registered with @scoops.com but every time i have to enter @scoops.com i want that user just enter email name and @scoops.com auto fill and it will also show at the end of input field? here it is my code

<div class="form-group" autocomplete="off">
        <label>Email <span style="opacity: 0.5; font-style: italic;">(Required)</span></label>
        <input autocomplete="nope" type="text" name="email" id="email"  class="form-control input-lg" 
        placeholder="Enter Email" name="name" required=""/>
        <span id="error_email"></span>
        @if($errors->has('email'))
        <div class="alert alert-danger">
        {{ $errors->first('email') }}
        </div>
        @endif
      </div>

i want something like this

Answer 1

Since you use Bootstrap: Try to wrap your mail input into an Inputgroup. And then append the mail ending(by grouping your inputs). Also im not sure if 'autocomplete="nope"' is a state for this attribute. You should consider "off" if nope means no.

<div class="input-group">
    <input autocomplete="off" type="text" name="email" id="email"  class="form-control input-lg" placeholder="Enter Email" name="name" required=""/>
     <div class="input-group-append">
         <span class="input-group-text">@scoops.com</span>
     </div>
</div>

Answer 2

Adding to what´s been said above, you can do something like the code below to submit the user-typed value appended with whatever text you want:

<input id="myInput">
<button onclick="submit(document.getElementById('myInput').value)"></button>

<script>
  function submit(inputValue) {
    var submittedValue = inputValue + "@scoops.com"

    // insert here the code (like a POST request) to send the 'submittedValue' variable to wherever you want
  }
</script>