"Sayfada tek bir sunucu tarafı Form etiketi olabilir" Hatası Hakkında

gkmnada

Merhabalar,
Web projem için hazır bir login teması kullanıyorum. Kodlar aşağıdaki şekildedir.
İki tane form etiketi olduğu için hata vermektedir.
Tek form etiketi olduğu zaman ise araçlar düzgün gözükmemektedir.
Desteklerinizi rica ederim.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SYNLAB - Lojistik Takip Sistemi</title>
    <link href="Login/style.css" rel="stylesheet" />

</head>
<body>
    <div>
        <h2>
            <asp:Image ID="Image1" runat="server" Height="100px" ImageUrl="~/Images/SYNLOGO.png" Width="300px" />
        </h2>
    </div>

    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form action="#" runat="server">
                <h2>Kullanıcı Oluştur</h2>
                <asp:TextBox ID="txt_kullanici" runat="server" placeholder="Kullanıcı Adı"></asp:TextBox>
                <asp:TextBox ID="txt_sifre" runat="server" placeholder="Şifre"></asp:TextBox>
                <br />
                <asp:Button ID="btn_olustur" runat="server" Text="Oluştur" OnClick="btn_olustur_Click" Style="border-radius: 20px; border: 1px solid #0a346a; background-color: #0a346a; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; transition: transform 80ms ease-in;" />
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#" runat="server">
                <h2>Giriş Yap</h2>
                <asp:TextBox ID="txt_kullanci_login" runat="server" placeholder="Kullanıcı Adı"></asp:TextBox>
                <asp:TextBox ID="txt_sifre_login" runat="server" placeholder="Şifre"></asp:TextBox>
                <a href="#">Şifreni mi Unuttun?</a>
                <asp:Button ID="btn_login" runat="server" Text="Oluştur" OnClick="btn_login_Click" Style="border-radius: 20px; border: 1px solid #0a346a; background-color: #0a346a; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; transition: transform 80ms ease-in;" />
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Lojistik Takip Sistemi</h1>
                    <p>Kullanıcı Hesabınızla Giriş Yapmak İçin Tıklayın</p>
                    <button class="ghost" id="signIn">Giriş Yap</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Lojistik Takip Sistemi</h1>
                    <p>Kullanıcı Oluşturmak İçin Tıklayın</p>
                    <button class="ghost" id="signUp">Kullanıcı Oluştur</button>
                </div>
            </div>
        </div>
    </div>
    <script src="Login/script.js"></script>
</body>
</html>

ulas

CSS kodlarını da paylaşırsanız çözebiliriz belki.

gkmnada

ulas hocam, bakabildiniz mi acaba?

gkmnada

CSS kodları aşağıdadır.
Desteklerinizi rica ederim.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
	box-sizing: border-box;
}

body {
	background: #f6f5f7;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	height: 100vh;
	margin: -20px 0 50px;
}

h1 {
	font-weight: bold;
	margin: 0;
}

h2 {
	text-align: center;
}

p {
	font-size: 14px;
	font-weight: 100;
	line-height: 20px;
	letter-spacing: 0.5px;
	margin: 20px 0 30px;
}

span {
	font-size: 12px;
}

a {
	color: #333;
	font-size: 14px;
	text-decoration: none;
	margin: 15px 0;
}

button {
	border-radius: 20px;
	border: 1px solid #0a346a;
	background-color: #0a346a;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
}

button:active {
	transform: scale(0.95);
}

button:focus {
	outline: none;
}

button.ghost {
	background-color: transparent;
	border-color: #FFFFFF;
}

form {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}

input {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 8px 0;
	width: 100%;
}

.container {
	background-color: #fff;
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 768px;
	max-width: 100%;
	min-height: 480px;
}

.form-container {
	position: absolute;
	top: 0;
	height: 100%;
	transition: all 0.6s ease-in-out;
}

.sign-in-container {
	left: 0;
	width: 50%;
	z-index: 2;
}

.container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}

.sign-up-container {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: 1;
}

.container.right-panel-active .sign-up-container {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	animation: show 0.6s;
}

@keyframes show {
	0%, 49.99% {
		opacity: 0;
		z-index: 1;
	}
	
	50%, 100% {
		opacity: 1;
		z-index: 5;
	}
}

.overlay-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 100;
}

.container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}

.overlay {
	background: #FF416C;
	background: -webkit-linear-gradient(to right, #0a346a, #057bb1);
	background: linear-gradient(to right, #057bb1, #0a346a);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	color: #FFFFFF;
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
  	transform: translateX(50%);
}

.overlay-panel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	text-align: center;
	top: 0;
	height: 100%;
	width: 50%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.overlay-left {
	transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
	transform: translateX(0);
}

.overlay-right {
	right: 0;
	transform: translateX(0);
}

.container.right-panel-active .overlay-right {
	transform: translateX(20%);
}

.social-container {
	margin: 20px 0;
}

.social-container a {
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	height: 40px;
	width: 40px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

ulas

Geç dönebildim yoğunluktan kbakmayın. HTML tarafında form yerine div etiketi kullanıp, belirlediğiniz class'ı CSS tarafındaki form ile değiştirmeyi dener misiniz? Değişiklikten sonra tarayıcı çerezini temizlemeyi unutmayın.

gkmnada

Hocam bu seferde aşağıdaki hatayı almaktayım.
'TextBox' türündeki 'txt_kullanici' denetimi runat=server değerine sahip bir form etiketine yerleştirilmelidir.

ulas

Sayfayı kapsayacak 1 adet form zaten kullanmıyor musunuz? Şuan hiçbir form yoksa o hatayı almanız normal.

gkmnada

Hocam,
Size ne kadar teşekkür etsem az kalır. 1 haftadır yabancı ve yerli bütün forumlarda makalelerde bunun çözümünü arıyordum. Dediğiniz gibi yaptım çözüldü. Sorunsuz çalışıyor. Destekleriniz için teşekkür ederim.

ulas

Rica ederim. Yeterli kaynak var aslında, sadece bu kaynaklara nasıl ulaşacağınızı öğrenmeniz gerekiyor zamanla.

zcetveli

Aynı sorunu bende alıyorum buradaki adımları takip ettim ama hala sorun bulunmaktad.Yardımcı olabilir misiniz?
MASTERPAGE SAYFAM:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Matematik.master.cs" Inherits="MatematikselIslemler.Matematik" %>
<!DOCTYPE html>
<html>
<head>
<title>Matematik</title>
<style>
body {
margin: 0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #04AA6D;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="active" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<ul>
<li><a class="active" href="default.aspx">Anasayfa</a></li>
<li><a href="DortIslem.aspx">Dört İşlem</a></li>
<li><a href="HarfSay.aspx">Harf Say</a></li>
<li><a href="OrtalamaHesap.aspx">Ortalama Hesap</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;" runat="server">
<h2>MATEMATİKSEL İŞLEMLER</h2>
<h3>Bazı basit matematik işlemlerini asp.net ile uygulama yapacağız.</h3>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>

</html>

DortIslem.aspx sayfam:
<%@ Page Title="" Language="C#" MasterPageFile="~/Matematik.Master" AutoEventWireup="true" CodeBehind="DortIslem.aspx.cs" Inherits="MatematikselIslemler.DortIslem" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<form id="Form2" runat="server">
<div class="form-group">
<table style="width: 100%">
<tr>
<td style="width: 120px">
<asp:Label for="Textbox1" runat="server" Text="Sayı:"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Height="16px" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 120px; height: 26px">
<asp:Label for="TextBox2" runat="server" Text="Sayı:"></asp:Label>
</td>
<td style="height: 26px">
<asp:TextBox ID="TextBox2" runat="server" Height="16px" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 120px">
<asp:Label for="TextBox3" runat="server" Text="Sonuç:"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Height="16px" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 120px; height: 33px">
<asp:Button ID="Button1" runat="server" Text="Topla" Width="124px" />
</td>
<td style="height: 33px">
<asp:Button ID="Button2" runat="server" Text="Çıkar" Width="124px" />
</td>
</tr>
<tr>
<td style="width: 120px">
<asp:Button ID="Button3" runat="server" Text="Çarp" Width="124px" />
</td>
<td>
<asp:Button ID="Button4" runat="server" Text="Böl" Width="124px" />
</td>
</tr>
</table>
</div>
</form>
</asp:Content>

KerimCETINBAS

merhaba;
hic aspx yazmadigim icin emin olamamakla birlikte, formlarin ikiside ayni sayfaya ayni hash uzerinden submit ediyor, yani doğal olarak server hangi formu handle ettiğini bilemiyor. Her form icin ayri action tanimlarsaniz sorununuz duzelecektir muhtemelen.

<form action="?form1" .... > .... </form>
<form action="?form2" ...> ... </form>

edit: arastirmama gore sayfada birden fazla runat="server" olamiyor. Ancak runat="server" attirubutesini eklemeden kullanabilirsiniz. Bunun icin standard rest controller kullanarak formu submit etmeniz gerekecek,

edit2: Emin olmamakla birlikte runat="server" compile asamasinda bir islevi yoksa, js ile focuslanan forma runat="server" attirubutesi ekleyebilirsiniz.

zcetveli

Bu fikirden yola çıkarak masterpage kısmındaki form ibaresini kaldırdığım zaman sorunum çözüldü.Çok teşekkür ederim.Masterpage kısmında form kullandığım için webform with masterpage kısmındaki forma göndermemiş beni.Bu konularda asp.net de kaliteli ve sorularına cevap bulabileceğin içerikler gerçekten çok az bu yüzden süper oldu.