Как добавить добавочное значение в форме ввода?

Question

Я пытаюсь сделать что-то в этом роде sign up form here. Они добавили свое доменное имя как undeletable value, чтобы позволить пользователю создавать папку поддомена. Я хочу сделать то же самое со следующими входными:

<input type="text" class="form-control inputlogin" name="subdomain_name" placeholder="Sub Domain" required="" value=""/> 

Я нашел технику here, но я не ищу, чтобы добавить префикс. Значение должно быть после, как в примере.

Answer 1

Это всего лишь уловка. input либо полностью редактируемы, либо отключены (вообще не редактируются). Невозможно обойти это.

Что делается в форме, с которой вы связаны, является трюком, где «замороженный» текст помещается в поле ввода, поэтому он выглядит так, как будто он является частью фактического входного тега, но это не так.

Se my simple jsfiddle illustration. Посмотрите, как стиль можно использовать для создания иллюзии, которую вы хотите.

Answer 2

Вот пример использования Bootstrap 3:

Bootstrap 3 Sub-domain input

<div class="container"> 
    <div class="form-group"> 
    <div class="input-group"> 
    <input type="text" class="form-control" placeholder="Your sub-domaion here"> 
    <span class="input-group-addon" title="Type of Question">.our-domain.com</span> 
    </div> 
    </div> 
</div>