Я создаю форму, в которой мне нужен профиль Изображение пользователя, и я хочу, чтобы изображение было в круглой или прямоугольной форме, и по умолчанию область изображения является черной или фиктивное изображение, и когда пользователь нажимает на область, ему разрешено выбирать изображение. Например, просмотрщик профиля в Facebook, Twitter.Добавить изображение Изображение в форме в HTML и CSS
Моя форма
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/
вы должны будете исследовать API, твиттер/facebook и выяснить, как именно делать это - шаг, на который нельзя ответить в одной мысли – mike510a
нет, я просто даю пример twitter и facebook, я хочу загрузчик изображений – Nakhhhh
Это также многоэтапный процесс - вам понадобится встроенная реализация с использованием PHP или какой-либо другой серверный язык для хранения фотографии ... которые должны быть отправлены на сервер через FORM или через 'ajax', тогда вам также, вероятно, понадобится« база данных »для хранения всех разные профили пользователей – mike510a