Saltar al contenido

cambiar imagen de perfil ejemplo de código html css

Nuestro grupo redactor ha pasado mucho tiempo investigando respuestas a tu duda, te compartimos la respuestas por esto nuestro objetivo es servirte de mucha apoyo.

Ejemplo 1: agregar una imagen de perfil a un formulario en html y css

<divclass="signup-w3ls"><divclass="signup-agile1"><formaction="#"method="post"><divclass="form-control"><labelclass="header">Profile Photo:label><inputid="image"type="file"name="profile_photo"placeholder="Photo"required=""capture>div><divclass="form-control"><labelclass="header">Store Name :label><inputtype="text"id="store_name"name="store_name"placeholder="Store Name"title="Please enter your First Name"required="">div><divclass="form-control"><labelclass="header">Store Type :label><inputtype="text"id="store_type"name="store_type"placeholder="Store Type"title="Please enter your Last Name"required="">div><divclass="form-control"><labelclass="header">Owner Type :label><inputtype="text"id="owner_type"name="owner_type"placeholder="Owner Type"title="Please enter a valid email"required="">div><divclass="form-control"><labelclass="header">Website :label><inputtype="url"id="website"name="website"placeholder="Website"id="password1"required="">div><divclass="form-control"><labelclass="header">Contact Number :label><inputtype="text"id="contact_number"name="contact_number"placeholder="Contact Number"required="">div><divclass="form-control"><labelclass="header">Contact Email :label><inputtype="email"id="contact_email"name="contact_email"placeholder="Contact Email"required="">div><inputtype="submit"class="register"value="Register">form>div>div>

Ejemplo 2: imagen de carga de archivo de entrada html para foto de perfil

#imageUpload

    display: none;


#profileImage

    cursor: pointer;


#profile-container 
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;


#profile-container img 
    width: 150px;
    height: 150px;

Al final de todo puedes encontrar las acotaciones de otros programadores, tú incluso puedes insertar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *