Ajouter une Photo de Profil en forme en HTML et CSS
Je suis entrain de créer un formulaire dans lequel j'ai besoin de l'Image de Profil de l'utilisateur et je veux que l'image est dans le cercle ou une forme rectangulaire, et par défaut, la zone de l'image est noir ou mannequin photo, et lorsque l'utilisateur clique sur la zone, alors il/elle est autorisé à choisir une image. e.g Photo de Profil Uploader dans Facebook, Twitter.
Mon Formulaire
HTML
<div class="signup-w3ls">
<div class="signup-agile1">
<form action="#" method="post">
<div class="form-control">
<label class="header">Profile Photo:</label>
<input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture>
</div>
<div class="form-control">
<label class="header">Store Name :</label>
<input type="text" id="store_name" name="store_name" placeholder="Store Name" title="Please enter your First Name" required="">
</div>
<div class="form-control">
<label class="header">Store Type :</label>
<input type="text" id="store_type" name="store_type" placeholder="Store Type" title="Please enter your Last Name" required="">
</div>
<div class="form-control">
<label class="header">Owner Type :</label>
<input type="text" id="owner_type" name="owner_type" placeholder="Owner Type" title="Please enter a valid email" required="">
</div>
<div class="form-control">
<label class="header">Website :</label>
<input type="url" id="website" name="website" placeholder="Website" id="password1" required="">
</div>
<div class="form-control">
<label class="header">Contact Number :</label>
<input type="text" id="contact_number" name="contact_number" placeholder="Contact Number" required="">
</div>
<div class="form-control">
<label class="header">Contact Email :</label>
<input type="email" id="contact_email" name="contact_email" placeholder="Contact Email" required="">
</div>
<input type="submit" class="register" value="Register">
</form>
</div>
</div>
</div>
CSS
.signup-w3ls {
width: 50%;
margin: 70px 25% 80%;
padding: 0;
display: table;
position: relative;
}
.signup-agile1{
width:100%;
float:center;
}
.signup-w3ls .signup-agile1 .form-control {
margin-bottom: 20px;
}
label.header {
font-size: 16px;
font-weight: 500;
width: 215px;
color: grey;
margin-right:10px;
text-align:justify;
letter-spacing: 1px;
text-transform: uppercase;
display: inline-block;
font-family: 'Nunito', sans-serif;
}
input#image,input#store_name, input#store_type,input#owner_type, input#website,input#contact_number,input#contact_email {
padding:0 40px;
width:40%;
height:55px;
border: 1px solid #dadada;
color: grey;
text-align:justify;
outline: none;
letter-spacing: 1px;
font-size: 16px;
font-weight:normal;
font-family: 'Muli', sans-serif;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-o-border-radius:30px;
-ms-border-radius:30px;
}
input#image:focus,input#store_name:focus, input#store_type:focus,input#owner_type:focus, input#website:focus,input#contact_number:focus,input#contact_email:focus {
background-color:#f5f8fa !important;
border:1px solid #dadada;
}
input::-webkit-input-placeholder {
color: grey;
}
input:-moz-placeholder { /* Firefox 18- */
color: grey;
}
input::-moz-placeholder { /* Firefox 19+ */
color: grey;
}
input:-ms-input-placeholder {
color: grey;
}
.register {
background-color: lightgreen;
width: 52%;
height: 55px;
border: none;
margin-left: 233px;
cursor: pointer;
color: #fff;
outline: none;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
font-family: 'Muli', sans-serif;
}
.register:hover {
background-color:#36b051;
color:#fff;
}
JSFIDDLE:- https://jsfiddle.net/7ao1qxLe/
vous aurez à la recherche de twitter/facebook Api et de comprendre exactement comment le faire-son d'un processus multi-étapes qui ne peut pas être répondu dans une seule pensée
non, je viens de donner u exemple de twitter et facebook, je veux de l'image uploader
C'est aussi un processus multi-étapes-vous aurez besoin d'avoir un back-end de la mise en œuvre à l'aide de PHP ou de quelque autre langage côté serveur pour stocker la photo ... qui devra être soumis à l'arrière-plan via un FORMULAIRE ou via
oui, mais le frère, j'ai besoin que le design, je suis en php et mysql expert
donc, je dis que u peut m'aider pour me donner de la conception de profil unique uploader
non, je viens de donner u exemple de twitter et facebook, je veux de l'image uploader
C'est aussi un processus multi-étapes-vous aurez besoin d'avoir un back-end de la mise en œuvre à l'aide de PHP ou de quelque autre langage côté serveur pour stocker la photo ... qui devra être soumis à l'arrière-plan via un FORMULAIRE ou via
ajax
d'abord, puis vous aurez aussi probablement besoin d'un database
pour stocker tous les différents profils d'utilisateursoui, mais le frère, j'ai besoin que le design, je suis en php et mysql expert
donc, je dis que u peut m'aider pour me donner de la conception de profil unique uploader
OriginalL'auteur Nakhhhh | 2016-12-31