comment ajouter du texte statique à l'intérieur de formulaire de saisie

Comment puis-je mettre ce texte statique dans le formulaire de saisie? C'est là tout le temps.

comment ajouter du texte statique à l'intérieur de formulaire de saisie

C'est mon code:

<label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain"/>
Pouvez-vous élaborer sur ce que vous essayez d'atteindre?
L'utilisation d'un inspecteur dom/debugger pour voir comment c'est fait partout où vous avez vu cette technique dans l'utilisation. Vous trouverez probablement un positionnement absolu div
Je dessine c'est photoshop. Maintenant, je ne sais pas comment le faire 🙂 Donc j'ai besoin de mettre le texte à l'intérieur de mon entrée. Pas ci-dessous, pas au-dessus de l'entrée.
J'ai juste aimé la façon dont vous avez posé cette question. L'image fait plus de sens que les mots & elle donne de meilleurs résultats.

OriginalL'auteur Davor Budimir | 2014-06-23

  1. 8
    <label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain" />
<input type="text" id="subdomaintwo" value=".domain.com" disabled/>

    css

    input[type="text"]#subdomaintwo{
    -webkit-appearance:none!important;
    color:red;
    text-align:right;
    width:75px;
    border:1px solid gray;
    border-left:0px;
    margin:0 0 0 -7px;
    background:white;
}
input[type="text"]#subdomain{
    -webkit-appearance:none!important;
    border:1px solid gray;
    border-right:0px;
    outline:none;
}

    JS Fiddle pour cette

    OriginalL'auteur alessandrio

  2. 1

    Propriété Readonly doit être utilisée:

    <label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain" />
<input type="text" id="subdomaintwo" value=".domain.com" readonly="readonly" />

    Désactivé car les contrôles ne pas recevoir le focus, sont ignorés dans la navigation de tabulations, ne sont pas affichés. Propriété en lecture seule uniquement ne peut pas être modifiée par l'utilisateur.

    Alors que cette information est précieuse, ce qui devrait avoir été posté un commentaire à avril de réponse.

    OriginalL'auteur nerkn

  3. 1

    Que diriez-emballage de votre input à l'intérieur d'un div (appelons ça de la div.wrapper pour la facilité), et ensuite vous pouvez ajouter du texte dans le div.wrapper avec ".domain.com" aligné à droite? Comme ceci par exemple:

    <div class="wrapper">
    <input type="text" name="subdomain"/>
    <p class="input-text">.domain.com</p>
    </div>

    Vous pouvez définir le style de votre div pour la faire ressembler à votre entrée, et assurez-vous que l'entrée effective n'a pas de frontière, etc ... donc c'est impossible à distinguer de div.wrapper.

    Peu un hack, mais pourquoi pas?

    OriginalL'auteur Lucy Mac

  4. 0

    Je ne sais pas si cela peut être accompli à l'aide d'un formulaire de saisie.

    Peut-être ce que vous voyez il n'y a pas une seule forme d'entrée, mais un formulaire de saisie à côté d'un texte statique.

    Donc, mon idée ici est de mettre un formulaire de saisie (où l'utilisateur peut écrire), suivi par un texte statique (.domain.com). Ensuite, vous pouvez mettre les deux à l'intérieur d'un conteneur et le style le conteneur à ressembler à un formulaire de saisie.

    Cela fera l'affaire.

    OriginalL'auteur GuillermoMP