HTML come inserire un input testo in un'immagine html

[darklove]

salve sto creando un piccolo sito(in html5 come front-end) dove all'interno voglio inserire un immagine con un input text in un punto preciso per esempio
quanti anni ha? con un box testo dove inserire i dati. si può fare o devo scrivere tutti i dati dell'immagine a mano

 

[guruwebmaster]

Devi fare:

<img src="url-immagine.jpg" alt="Nome" />

<form method="POST" action="page.php">

    <label for="id-input">Età:</label>

    <input type="text" id="id-input" name="Nome" />

    <input type="submit" value="INVIA" />

</form>

Poi per mettere l'input nell'immagine devi usare il CSS.
Position: absolute; per l'immagine e quant'altro

 

[darklove]

Devi fare:

<img src="url-immagine.jpg" alt="Nome" />

<form method="POST" action="page.php">

    <label for="id-input">Età:</label>

    <input type="text" id="id-input" name="Nome" />

    <input type="submit" value="INVIA" />

</form>

Poi per mettere l'input nell'immagine devi usare il CSS.
Position: absolute; per l'immagine e quant'altro

si ciao ho provato il suo metodo ma non ho risolto nulla volevo inserire un input testo in un'immagine in un punto preciso ma me lo mette fuori dall'immagine non so perchè ho anche messo la classe css position absolute come mi aveva detto ma nulla mi compare questo lo mette fuori dall'immagine

 

[guruwebmaster]

Se riesce, posta il codice CSS e HTML così possiamo vedere dov'è l'errore e correggerlo

 

[darklove]

Se riesce, posta il codice CSS e HTML così possiamo vedere dov'è l'errore e correggerlo

eccolo

 

[guruwebmaster]

La position absolute, deve applicarlo all'immagine

<img src="url-immagine.jpg" alt="Nome" />

<form method="POST" action="page.php">

    <label for="id-input">Età:</label>

    <input type="text" id="id-input" name="Nome" />

    <input type="submit" value="INVIA" />

</form>

img {
    position: absolute;
}
form {
    margin-top: 50px; /*---- Il margine che vuoi dall'alto in pixel----*/
    margin-left: 50px; /*---- Il margine che vuoi dal lato sinitro in pixel ----*/
}

Prova e mi dica se ha funzionato

 

[darklove]

La position absolute, deve applicarlo all'immagine

<img src="url-immagine.jpg" alt="Nome" />

<form method="POST" action="page.php">

    <label for="id-input">Età:</label>

    <input type="text" id="id-input" name="Nome" />

    <input type="submit" value="INVIA" />

</form>

img {
    position: absolute;
}
form {
    margin-top: 50px; /*---- Il margine che vuoi dall'alto in pixel----*/
    margin-left: 50px; /*---- Il margine che vuoi dal lato sinitro in pixel ----*/
}

Prova e mi dica se ha funzionato

ho provato ma non funziona è come se l'immagine copre l'input e l'invio

 

[guruwebmaster]

aggiunga al form

form {
    position: relative;
    z-index: 2;
}

e all'immagine

img {
    z-index: 1;
}

 

[darklove]

grazie,

 

[darklove]

aggiunga al form

form {
    position: relative;
    z-index: 2;
}

e all'immagine

img {
    z-index: 1;
}

Scusi ancora ma quando vado a modificare il margine superiore mi sposta anche l'immagine con l'input mentre io vorrei spostare solo l'input