Html 5 ile giriş yap/kayıt ol sayfası oluşturma

bahattinarda

bahattinarda

Üye
16 May 2023
133
40
23
TÜRKİYE
Bu komutları kullanarak giriş yap kayıt ol sayfası oluşturabilirsiniz;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Giriş ve Kayıt Ol Sayfaları</title>
<style>
/* CSS stilleri burada */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}

.buttons {
display: flex;
justify-content: space-between;
width: 250px;
margin-bottom: calc(40px + 20px);
}

button {
padding: 15px 25px;
font-size: 18px;
margin: 10px;
transition: all 0.3s ease;
border-radius: 15px;
}

#loginButton:hover,
#registerButton:hover {
transform: scale(1.1);
}

#loginButton:focus,
#registerButton:focus {
transform: scale(1.1);
}

.container {
display: none;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: scale(1.1);
}

.container.show {
display: block;
transform: scale(1.3);
margin-bottom: 20px;
}

input {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 200px;
}

.message {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>

<!-- Giriş ve Kayıt Ol Butonları -->
<div class="buttons" style="margin-bottom: calc(80px + 20px);">
<button onclick="showForm('loginContainer')" id="loginButton">Giriş Yap</button>
<button onclick="showForm('registerContainer')" id="registerButton">Kayıt Ol</button>
</div>

<!-- Giriş ve Kayıt Ol Formları -->
<div class="container" id="loginContainer">
<form id="loginForm" autocomplete="on" onsubmit="login(event)">
<h2>Giriş Yap</h2>
<input type="email" id="email" name="email" placeholder="E-posta" required>
<input type="password" id="password" name="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>

<div class="container" id="registerContainer">
<form id="registerForm" autocomplete="on" onsubmit="register(event)">
<h2>Kayıt Ol</h2>
<input type="email" id="regEmail" name="regEmail" placeholder="E-posta" required>
<input type="password" id="regPassword" name="regPassword" placeholder="Şifre" required>
<input type="text" id="name" name="name" placeholder="İsim" required>
<input type="text" id="surname" name="surname" placeholder="Soyisim" required>
<button type="submit">Kayıt Ol</button>
</form>
</div>

<!-- Mesaj gösterme alanı -->
<div class="message" id="message"></div>

<script>
function showForm(formId) {
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
containers.classList.remove('show');
}
document.getElementById(formId).classList.add('show');

document.getElementById('message').innerText = '';
}

function login(event) {
event.preventDefault();
showMessage('Siteme Hoş Geldin');
// Giriş yapma işlemi burada gerçekleştirilebilir.
}

function register(event) {
event.preventDefault();
showMessage('Kayıt Oluşturuldu');
showForm('loginContainer');
}

function showMessage(message) {
document.getElementById('message').innerText = message;
document.getElementById('message').style.display = 'block';
setTimeout(function() {
document.getElementById('message').innerText = '';
}, 3000);
}
</script>
</body>
</html>
KODLAR BANA AİTTİR!
 
ACE Veen

ACE Veen

Uzman üye
4 Şub 2023
1,111
563
Belirsiz
bahattinarda' Alıntı:
Bu komutları kullanarak giriş yap kayıt ol sayfası oluşturabilirsiniz;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Giriş ve Kayıt Ol Sayfaları</title>
<style>
/* CSS stilleri burada */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}

.buttons {
display: flex;
justify-content: space-between;
width: 250px;
margin-bottom: calc(40px + 20px);
}

button {
padding: 15px 25px;
font-size: 18px;
margin: 10px;
transition: all 0.3s ease;
border-radius: 15px;
}

#loginButton:hover,
#registerButton:hover {
transform: scale(1.1);
}

#loginButton:focus,
#registerButton:focus {
transform: scale(1.1);
}

.container {
display: none;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: scale(1.1);
}

.container.show {
display: block;
transform: scale(1.3);
margin-bottom: 20px;
}

input {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 200px;
}

.message {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>

<!-- Giriş ve Kayıt Ol Butonları -->
<div class="buttons" style="margin-bottom: calc(80px + 20px);">
<button onclick="showForm('loginContainer')" id="loginButton">Giriş Yap</button>
<button onclick="showForm('registerContainer')" id="registerButton">Kayıt Ol</button>
</div>

<!-- Giriş ve Kayıt Ol Formları -->
<div class="container" id="loginContainer">
<form id="loginForm" autocomplete="on" onsubmit="login(event)">
<h2>Giriş Yap</h2>
<input type="email" id="email" name="email" placeholder="E-posta" required>
<input type="password" id="password" name="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>

<div class="container" id="registerContainer">
<form id="registerForm" autocomplete="on" onsubmit="register(event)">
<h2>Kayıt Ol</h2>
<input type="email" id="regEmail" name="regEmail" placeholder="E-posta" required>
<input type="password" id="regPassword" name="regPassword" placeholder="Şifre" required>
<input type="text" id="name" name="name" placeholder="İsim" required>
<input type="text" id="surname" name="surname" placeholder="Soyisim" required>
<button type="submit">Kayıt Ol</button>
</form>
</div>

<!-- Mesaj gösterme alanı -->
<div class="message" id="message"></div>

<script>
function showForm(formId) {
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
containers.classList.remove('show');
}
document.getElementById(formId).classList.add('show');

document.getElementById('message').innerText = '';
}

function login(event) {
event.preventDefault();
showMessage('Siteme Hoş Geldin');
// Giriş yapma işlemi burada gerçekleştirilebilir.
}

function register(event) {
event.preventDefault();
showMessage('Kayıt Oluşturuldu');
showForm('loginContainer');
}

function showMessage(message) {
document.getElementById('message').innerText = message;
document.getElementById('message').style.display = 'block';
setTimeout(function() {
document.getElementById('message').innerText = '';
}, 3000);
}
</script>
</body>
</html>
KODLAR BANA AİTTİR!
Genişletmek için tıkla ...
hocam görüntü ekleseydiniz
 
AtaberkSALAR

AtaberkSALAR

Üye
28 Ağu 2023
51
24
bahattinarda' Alıntı:
Bu komutları kullanarak giriş yap kayıt ol sayfası oluşturabilirsiniz;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Giriş ve Kayıt Ol Sayfaları</title>
<style>
/* CSS stilleri burada */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}

.buttons {
display: flex;
justify-content: space-between;
width: 250px;
margin-bottom: calc(40px + 20px);
}

button {
padding: 15px 25px;
font-size: 18px;
margin: 10px;
transition: all 0.3s ease;
border-radius: 15px;
}

#loginButton:hover,
#registerButton:hover {
transform: scale(1.1);
}

#loginButton:focus,
#registerButton:focus {
transform: scale(1.1);
}

.container {
display: none;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: scale(1.1);
}

.container.show {
display: block;
transform: scale(1.3);
margin-bottom: 20px;
}

input {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 200px;
}

.message {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>

<!-- Giriş ve Kayıt Ol Butonları -->
<div class="buttons" style="margin-bottom: calc(80px + 20px);">
<button onclick="showForm('loginContainer')" id="loginButton">Giriş Yap</button>
<button onclick="showForm('registerContainer')" id="registerButton">Kayıt Ol</button>
</div>

<!-- Giriş ve Kayıt Ol Formları -->
<div class="container" id="loginContainer">
<form id="loginForm" autocomplete="on" onsubmit="login(event)">
<h2>Giriş Yap</h2>
<input type="email" id="email" name="email" placeholder="E-posta" required>
<input type="password" id="password" name="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>

<div class="container" id="registerContainer">
<form id="registerForm" autocomplete="on" onsubmit="register(event)">
<h2>Kayıt Ol</h2>
<input type="email" id="regEmail" name="regEmail" placeholder="E-posta" required>
<input type="password" id="regPassword" name="regPassword" placeholder="Şifre" required>
<input type="text" id="name" name="name" placeholder="İsim" required>
<input type="text" id="surname" name="surname" placeholder="Soyisim" required>
<button type="submit">Kayıt Ol</button>
</form>
</div>

<!-- Mesaj gösterme alanı -->
<div class="message" id="message"></div>

<script>
function showForm(formId) {
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
containers.classList.remove('show');
}
document.getElementById(formId).classList.add('show');

document.getElementById('message').innerText = '';
}

function login(event) {
event.preventDefault();
showMessage('Siteme Hoş Geldin');
// Giriş yapma işlemi burada gerçekleştirilebilir.
}

function register(event) {
event.preventDefault();
showMessage('Kayıt Oluşturuldu');
showForm('loginContainer');
}

function showMessage(message) {
document.getElementById('message').innerText = message;
document.getElementById('message').style.display = 'block';
setTimeout(function() {
document.getElementById('message').innerText = '';
}, 3000);
}
</script>
</body>
</html>
KODLAR BANA AİTTİR!
Genişletmek için tıkla ...
çok teşekkürler ne zamandır bu tarz bişey arıyordum.
 
Crackmeci

Crackmeci

Katılımcı Üye
28 Haz 2020
312
170
Web
bahattinarda' Alıntı:
Bu komutları kullanarak giriş yap kayıt ol sayfası oluşturabilirsiniz;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Giriş ve Kayıt Ol Sayfaları</title>
<style>
/* CSS stilleri burada */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}

.buttons {
display: flex;
justify-content: space-between;
width: 250px;
margin-bottom: calc(40px + 20px);
}

button {
padding: 15px 25px;
font-size: 18px;
margin: 10px;
transition: all 0.3s ease;
border-radius: 15px;
}

#loginButton:hover,
#registerButton:hover {
transform: scale(1.1);
}

#loginButton:focus,
#registerButton:focus {
transform: scale(1.1);
}

.container {
display: none;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: scale(1.1);
}

.container.show {
display: block;
transform: scale(1.3);
margin-bottom: 20px;
}

input {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 200px;
}

.message {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>

<!-- Giriş ve Kayıt Ol Butonları -->
<div class="buttons" style="margin-bottom: calc(80px + 20px);">
<button onclick="showForm('loginContainer')" id="loginButton">Giriş Yap</button>
<button onclick="showForm('registerContainer')" id="registerButton">Kayıt Ol</button>
</div>

<!-- Giriş ve Kayıt Ol Formları -->
<div class="container" id="loginContainer">
<form id="loginForm" autocomplete="on" onsubmit="login(event)">
<h2>Giriş Yap</h2>
<input type="email" id="email" name="email" placeholder="E-posta" required>
<input type="password" id="password" name="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>

<div class="container" id="registerContainer">
<form id="registerForm" autocomplete="on" onsubmit="register(event)">
<h2>Kayıt Ol</h2>
<input type="email" id="regEmail" name="regEmail" placeholder="E-posta" required>
<input type="password" id="regPassword" name="regPassword" placeholder="Şifre" required>
<input type="text" id="name" name="name" placeholder="İsim" required>
<input type="text" id="surname" name="surname" placeholder="Soyisim" required>
<button type="submit">Kayıt Ol</button>
</form>
</div>

<!-- Mesaj gösterme alanı -->
<div class="message" id="message"></div>

<script>
function showForm(formId) {
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
containers.classList.remove('show');
}
document.getElementById(formId).classList.add('show');

document.getElementById('message').innerText = '';
}

function login(event) {
event.preventDefault();
showMessage('Siteme Hoş Geldin');
// Giriş yapma işlemi burada gerçekleştirilebilir.
}

function register(event) {
event.preventDefault();
showMessage('Kayıt Oluşturuldu');
showForm('loginContainer');
}

function showMessage(message) {
document.getElementById('message').innerText = message;
document.getElementById('message').style.display = 'block';
setTimeout(function() {
document.getElementById('message').innerText = '';
}, 3000);
}
</script>
</body>
</html>
KODLAR BANA AİTTİR!
Genişletmek için tıkla ...
Hocam kod etiketleri arasına alırsanız daha iyi olur konunuz daha temiz gözükür
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.