I suggest you to encapsulate your input
control inside a container (e.g. a span
). Inside this span you also add another element (e.g. anorther span) with absolute positioning.
Don't forget to add padding
to your input
so that when users write their usernames, then usernames does not overlap the @domain
stuff.
So my HTML is:
<span class="placeholder"><label>@domain</label><input type="text" name="username"/></span>
while my CSS is:
.placeholder {
position:relative;
}
.placeholder label{
position:absolute;
right:0;
margin-right:0.4em;
color:#aaa;
}
.placeholder input{
padding-right:5em;
}
Here is a working example: http://jsfiddle.net/Vjt6E/
Then in your PHP
code, you must add this value.
So, if your sending your data through a POST
method you add at the beggining of your PHP code:
<?php
$_POST['username'].='@domain'
... rest of your code here ...
If your are sending using a GET request then do:
<?php
$_GET['username'].='@domain'
... rest of your code here ...