Çözüldü HTML reset butonu textarea ve text inputlarını sıfırlamıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Egid Dikmen

Egid Dikmen

Hectopat
Katılım
13 Mayıs 2020
Mesajlar
1.146
Çözümler
1
Yer
Mersin
Daha fazla  
Sistem Özellikleri
Macbook Pro 16" M1 Pro Silver
Cinsiyet
Erkek
Meslek
Ağa/Paşa
Merhaba sayfamda bir form baloncuğu var ve ad için bir, mail için bir text ayrıyeten uzun yazı için de bir tane textarea inputları bulunuyor ve kullanıcı bana buradan bilgi verecek. Ancak gelin görün ki kutucuklara bir şey yazdıktan sonra reset butonuna basınca hiçbir değişiklik olmuyor. Başta düşündüm ve aklıma buton ile inputların aynı div içerisinde olmadığı geldi ancak sonra düşününce form içinde aynı divde olmuş oluyorlar. Sonuç olarak ne yapmam gerektiğini bilemedim.
Kodlar aşağıdadır.
Divleri görün diye *{border: 2px Solid Black;} yaptım.

ss2.png


Tam sayfa:

ss3.png


Kodlar:

HTML: 
<!DOCTYPE html>
<HTML>

<HEAD>
 <title>Ferhat DIKMEN</title>
 <link rel="icon" type="image/x-icon" href="images/ikon.png">
 <meta name="author" content="Ferhat DIKMEN">
 <meta name="keywords" content="Ferhat , Dikmen , DIKMEN , Ferhat Dikmen , Portfolio , Portfoy">
 <meta name="description" content="Ferhat Dikmen's personal portfolio website">
 <meta charset="UTF-8">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859">
 <meta http-equiv="content-language" content="tr">
 <meta http-equiv="refresh" content="10000">
 <link rel="stylesheet" href="css/banaulasin.css">
 <script type="text/javascript" src="js/banaulasin.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</HEAD>

<BODY>

<!-- sayfayı hot pink yapmayı unutma-->
<div class="tabela"><!--tabela AC-->

 <div class="direk"><!--direk AC-->
 <div class="direk_kukla"></div> <!--Gölgenin asıl sahibi direğin arkasındaki div.-->

 <a href="anasayfa.html">
 <div class="tabela_anasayfa">Anasayfa</div>
 </a>

 <a href="banaulasin.html">
 <div class="tabela_banaUlasin">Bana Ulaşın</div><!--3 div üst üste-->
 <div class="tabela_banaUlasin_kukla"></div><!--Gölge bu divde-->
 <div class="tabela_banaUlasin_kukla2"></div><!--Kuyruk bu divde-->
 </a>

 <a href="hobiler.html">
 <div class="tabela_hobiler">Hobiler</div>
 </a>

 <a href="">
 <div class="tabela_sayfa">Boş Sayfa</div><!--Koyacak içerik bulunca içerisini dolduracağım.(3 Div üst üste)-->
 <div class="tabela_sayfa_kukla"></div><!--Üçgenler kukla 1'de-->
 <div class="tabela_sayfa_kukla2"></div><!--Gölge kukla 2'de-->
 </a>

 <a href="#" onclick="goBack()">
 <div class="tabela_geri">Geri</div>
 </a>

 </div><!--direk KAPAT-->

</div><!--tabela KAPAT-->

<div class="ustBaslik"><!--ustBaslik AÇ-->

 <div class="ustBaslik_resim">
 <img class="ustBaslik_resmi" src="images/emo6.png" >
 </div>

 <div class="ustBaslik_AltBaslik">
 <h1 id="altBaslik_h1"> mesajınızı alttaki form ile bana iletin</h1>
 </div>

 <div class="ustBaslik_yazi">
 Göndereceğiniz mesaj herhangi bir konuyu içerebilir. Örneğin anasayfada değindiğim gibi sitede gördüğünüz.
 hataları veya iş hayatına dair teklif , öneri vb. mesajlarınızı iletebilirsiniz.
 <br>
 Zaman ayırdığınız için teşekkür ederim.
 </div>

</div><!--ustBaslik KAPAT-->

<div class="form"><!--Form AÇ-->

<div class="form_cati">Mesajını İlet!</div><!--Kalın renkli şerit. İçerisinde Mesajını İlet! yazıyor-->

 <div class="formSol"><!--formSol AÇ-->
 <p class="p_ad">Adınız/Şirket Adı</p>
 <hr id="hr_ad">
 <input class="inputAd" type="text">

 <p class="p_mail">Mail Adresiniz</p>
 <hr id="hr_mail">
 <input class="inputMail" type="email">

 <p class="p_dosya">Eklemek İstediğiniz Bir Dosya</p>
 <hr id="hr_dosya">
 <input id="inputDosya" type="file" style="color:transparent;" onchange="this.style.color = 'black';" hidden/>
 <label for="inputDosya">Dosya Ekle</label>
 </div><!--formSol KAPAT-->

 <div class="formSag"><!--formSag AÇ-->
 <p class="p_mesaj">Mesajınız</p>
 <hr id="hr_mesaj">
 <textarea class="inputMesaj" rows="12" cols="51"></textarea>
 </div><!--formSag KAPAT-->

 <div class="formButonlar"><!--formButonlar AÇ-->
 <button type="reset" class="butonReset" value="Reset">Reset</button>
 <button type="submit" class="butonSubmit" onclick="mesajFonksyon()" value="Gönder">Gönder</button>

 </div><!--formButonlar KAPAT-->

</div><!--Form KAPAT-->

</BODY>
</HTML>

CSS: 
body{
background-color: #FFE6D7;
font-family: 'arciform',monospace;
margin: 0;
padding: 0;
}

*{
box-sizing: border-box;
font-family: 'arciform',monospace;

}

a:link {
color: transparent;
text-decoration: none;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

.ustBaslik{
height: 180px;
width: 1300px;
position: absolute;
margin-left: 500px;
margin-top: 50px;
border: 8px solid #EB5800;
border-radius: 60px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.ustBaslik_resim{
height:164px ;
width:300px ;
position: absolute;
}

.ustBaslik_resmi{
height:164px ;
width:190px ;
position: absolute;
padding-left: 10px;
margin-left: 40px;
}

.ustBaslik_AltBaslik{
height:80px ;
width:1000px ;
position: absolute;
margin-left: 300px;
margin-top: 0px;
font-size: 18px;
font-weight: bolder;
}

#altBaslik_h1{
color: #EB5800;
}

.ustBaslik_yazi{
height: 70px;
width: 900px;
position: absolute;
margin-top:80px ;
margin-left:300px ;
font-size:17px ;
}

.form{
height:600px ;
width:1300px ;
position: absolute;
margin-left: 500px;
margin-top: 300px;
border: 8px solid #EB5800;
border-radius: 60px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.form_cati{
position: absolute;
height: 100px;
width: 1300px;
border: 1px solid #EB5800;
border-top-left-radius:60px ;
border-top-right-radius:60px ;
color: white;
background-color: #EB5800;
margin-left: -8px;
padding-top: 10px;
font-size: 60px;
font-weight: bolder;
text-align: center;
}

.formSol{
height: 480px;
width: 500px;
margin-top: 100px;
margin-left: 20px;
align-content: center;
padding-top: 25px;
position: absolute;
}

.formSag{
height: 380px;
width: 600px;
margin-top: 100px;
margin-left: 600px;
align-content: center;
position: absolute;
}

.formButonlar{
position: absolute;
height: 95px;
width: 600px;
align-content: center;
margin-top: 485px;
margin-left: 600px;

}

/*-------------------------- SINIR --------------------------*/

.p_ad{
height: 30px;
width: 300px;
font-size:25px ;
font-weight: bolder;
text-align: center;
margin-left: auto;
margin-right: auto;

}

.p_mail{
height: 30px;
width: 200px;
font-size:25px ;
font-weight: bolder;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.p_dosya{
height: 30px;
width: 450px;
font-size:25px ;
font-weight: bolder;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.p_mesaj{
height: 30px;
width: 450px;
font-size:25px ;
font-weight: bolder;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

#hr_ad{width: 300px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
#hr_mail{width: 250px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
#hr_dosya{width: 450px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
#hr_mesaj{width: 150px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}

.inputAd{
height:40px ;
width:220px ;
font-size: 20px;
font-weight: bold;
text-align: center;
border: 4px solid #EB5800;
border-radius: 10px;
margin-left: 140px;
}
/*hover koyacam unutma*/
.inputMail{
height:40px ;
width:300px ;
font-size: 20px;
font-weight: bold;
text-align: center;
border: 4px solid #EB5800;
border-radius: 10px;
text-transform:lowercase;
margin-left: 100px;
}

.inputMesaj{
border-radius: 10px;
border: 4px solid #EB5800;
padding: 5px;
font-size: 20px;
font-weight: bolder;
overflow-y: scroll;
resize: none;

}

/*#inputDosya{} ALTTAKİ LABEL HALLEDİYOR*/

label{
display: inline-block;
background-color: #EB5800;
color: white;
font-weight: bolder;
padding: 0.5rem;
font-family: sans-serif;
border: 4px solid #EB5800;
border-radius: 10px;
cursor: pointer;
margin-top: 1rem;
margin-left: 180px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

label:hover{color:#EB5800; background-color: white;}

.butonReset{

height: 40px;
width: 100px;
color: white;
background-color: #EB5800;
border-radius: 10px;
border: 3px solid #EB5800;
text-align: center;
font-size: 20px;
font-weight: bolder;
margin-left: 175px;
margin-top: 9px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.butonSubmit{
position: absolute;
height: 40px;
width: 100px;
color: white;
background-color: #EB5800;
border-radius: 10px;
border: 3px solid #EB5800;
margin-left: 25px;
margin-top: 9px;
text-align: center;
font-size: 20px;
font-weight: bolder;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.butonReset:hover , .butonSubmit:hover{ color:#EB5800; background-color: white;}

.tabela{
height:800px ;
width:300px ;
padding-right: 100px;
position: absolute;
margin-left:110px ;
margin-top: 100px;

}

.direk{
height:790px ;
width: 50px;
color: #EB5800;
background-color: #EB5800;
margin-left: 100px;
/*Uçgen Direk Tepesi*/
border-top: 50px solid #FFE6D7;
border-right: 50px solid transparent;
position: absolute;
z-index: 1;
}

.direk_kukla{
height:680px ;
margin-top: 35px;
width: 50px;
position: absolute; /*bozulursa absolute yap*/
color: #EB5800;
background-color: #EB5800;
z-index: -1;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.tabela_anasayfa{
height:60px ;
width:200px ;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
margin-top: 30px;
margin-left:-74px;
color: white;
background-color: #EB5800;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
font-size: 30px;
font-weight: 600;
padding-left: 35px;
padding-top: 10px;
transform: rotate(-5deg)
}
.tabela_anasayfa:hover{color: #EB5800; background-color: white;}

.tabela_banaUlasin{
height:73px ;
width:215px ;
margin-top: 53px;
margin-left:-84px;
color: white;
background-color: #EB5800;
font-size: 27px;
font-weight: 600;
padding-left: 20px;
padding-top: 20px;
position: absolute;
z-index: 3;
border-top-left-radius:10px ;
border-bottom-left-radius: 10px;
transform: rotate(15deg)

}
.tabela_banaUlasin_kukla{
height:70px ;
width:198px ;
margin-top: 55px;
margin-left:-80px;
color: white;
background-color: #EB5800;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
font-size: 27px;
font-weight: 600;
padding-left: 20px;
padding-top: 13px;
position: absolute;
border-top-left-radius:10px ;
border-bottom-left-radius: 10px;
z-index: -1;
transform: rotate(15deg)
}
.tabela_banaUlasin_kukla2{
height:60px ;
width:270px ;
margin-top: 60px;
margin-left:-84px;
color: white;
background-color: #EB5800;
font-size: 27px;
font-weight: 600;
padding-left: 20px;
padding-top: 13px;
position: absolute;
border-top: 30px solid transparent;
border-right: 50px solid #FFE6D7;
border-bottom: 30px solid transparent;
border-top-left-radius:10px ;
border-bottom-left-radius: 10px;
transform: rotate(15deg)
}

.tabela_banaUlasin:hover{color: #EB5800; background-color: white;}
.tabela_banaUlasin_kukla:hover{color: #EB5800; background-color: white;}
.tabela_banaUlasin_kukla2:hover{color: #EB5800; background-color: white;}

.tabela_hobiler{
height: 60px;
width: 200px;
border-top-right-radius:30px ;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius:5px ;
margin-left:-64px;
margin-top: 180px;
padding-left: 35px;
padding-top: 10px;
font-size: 30px;
font-weight: 600;
color: white;
background-color: #EB5800;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
transform: rotate(-9deg)
}
.tabela_hobiler:hover{color: #EB5800; background-color: white;}

.tabela_sayfa{
height: 60px;
width: 170px;
border-top-right-radius:5px ;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius:5px ;
margin-left:-50px;
margin-top: 45px;
padding-left: 10px;
padding-top: 10px;
font-size: 30px;
font-weight: 600;
color: white;
position: absolute;
background-color: #EB5800;
z-index: 2;

}

.tabela_sayfa_kukla{
height: 60px;
width: 270px;
margin-left:-99px;
margin-top: 45px;

font-size: 30px;
font-weight: 600;
color: white;
background-color: #EB5800;
position: absolute;
border-top: 30px solid transparent;
border-right: 50px solid #FFE6D7;
border-left:50px solid #FFE6D7 ;
border-bottom: 30px solid transparent;
z-index: 1;

}

.tabela_sayfa_kukla2{
height: 60px;
width: 130px;

margin-left:-40px;
margin-top: 45px;
padding-left: 35px;
padding-top: 10px;
font-size: 30px;
font-weight: 600;
color: white;
position: absolute;
background-color: #EB5800;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: -1;

}

.tabela_sayfa:hover{color: #EB5800; background-color:white;}
.tabela_sayfa_kukla:hover{color: #EB5800; background-color: white;}
.tabela_sayfa_kukla2:hover{color: #EB5800; background-color: white;}

.tabela_geri{
height:60px ;
width:200px ;
margin-top:150px;
margin-left:-74px;
border-bottom-left-radius:60px ;
color: white;
background-color: #EB5800;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
font-size: 30px;
font-weight: 600;
padding-left: 65px;
padding-top: 10px;
position: absolute;
transform: rotate(10deg)
}

.tabela_geri:hover{color: #EB5800; background-color: white;}
 

Dosya Ekleri

  • ss1.png
    ss1.png
    92,7 KB · Görüntüleme: 22
Son düzenleyen: Moderatör:
Çözüm
TheAny
Form içinde olmadan reset veya submit olmaz. Bahsettiğim form senin div diyerek yarattığın form değil.
<form> ... </form>
Örn;
HTML: 
<form action="" class="d-flex flex-wrap p-2" method="post">
    <input type="text" name="" id="">
    <div style="flex-basis: 100%; height: 0;"></div>
    <textarea name="" class="mt-1 mb-1" id="" cols="30" rows="10"></textarea>
    <div style="flex-basis: 100%; height: 0;"></div>
    <button type="reset">Reset</button>
    <button type="submit">Submit</button>
</form>
Bu şekilde çalışır.
Not: d-flex, flex-wrap p-2 gibi class'lar bootstrap'ten.
1692785611864.gif
Tarihe göre sırala Puana göre sırala
Form içinde olmadan reset veya submit olmaz. Bahsettiğim form senin div diyerek yarattığın form değil.
<form> ... </form>
Örn;
HTML: 
<form action="" class="d-flex flex-wrap p-2" method="post">
    <input type="text" name="" id="">
    <div style="flex-basis: 100%; height: 0;"></div>
    <textarea name="" class="mt-1 mb-1" id="" cols="30" rows="10"></textarea>
    <div style="flex-basis: 100%; height: 0;"></div>
    <button type="reset">Reset</button>
    <button type="submit">Submit</button>
</form>
Bu şekilde çalışır.
Not: d-flex, flex-wrap p-2 gibi class'lar bootstrap'ten.
1692785611864.gif
 
Artı 0 Eksi
Çözüm
TheAny dedi:
Form içinde olmadan reset veya submit olmaz. Bahsettiğim form senin div diyerek yarattığın form değil.
<form> ... </form>
Örn;
HTML: 
<form action="" class="d-flex flex-wrap p-2" method="post">
    <input type="text" name="" id="">
    <div style="flex-basis: 100%; height: 0;"></div>
    <textarea name="" class="mt-1 mb-1" id="" cols="30" rows="10"></textarea>
    <div style="flex-basis: 100%; height: 0;"></div>
    <button type="reset">Reset</button>
    <button type="submit">Submit</button>
</form>
Bu şekilde çalışır.
Not: d-flex, flex-wrap p-2 gibi class'lar bootstrap'ten.
Eki Görüntüle 1913853
Genişletmek için tıkla...
Haklısınız hocam ben onu sonradan farkedip değiştirdim ve oldu ancak buraya yazmamıştım teşekkürler.
 
Artı 0 Eksi

Benzer konular

erenghlt
HTML CSS loader ekleme
Mesaj
5
Görüntüleme
738
erenghlt
erenghlt
Neukâlion
HTML - HTML 5, CSS - CSS3 öğrenme ve tavsiye
Mesaj
2
Görüntüleme
202
Neukâlion
Neukâlion
S
HTML / CSS ile buton menüsü nasıl yapılır?
2
Mesaj
10
Görüntüleme
843
Samet Kırıcı
Samet Kırıcı
Nuri Albahan
HTML içine css gömme hatası
Mesaj
5
Görüntüleme
4B
Bir Deliden Fazlası
B
CaglarReyiz
HTML Buton yapılandırması
2
Mesaj
14
Görüntüleme
9B
CaglarReyiz
CaglarReyiz

Yeni konular

Yeni mesajlar

Geri
Yukarı