HTML Form Tag

action alanı
action alanı form'un hangi adrese gönderileceğini belirtir. Her form için sadece bir action olabilir. Eğer "#" kullanılıyorsa açıklaması şöyle

'#' submits form action url to itself(your page url where the form resides). Mostly used for dummy purposes and same page form submissions, although there are better techniques out there.

Örnek
Şöyle yaparız.

<form action="mailto:someone@example.com">
  Email Adress:<br>
  <input type="email" name="email_address" value="" maxlength="100" />
  <br>
  <input type="submit" value="Submit" />
</form>

enc Alanı

Örnek - file upload

Şöyle yaparız

<form method="post" action="fileuploadservlet" enctype="multipart/form-data">
  <input type="file" name="file1" />
  <input type="file" name="file2" />
  <input type="file" name="file3" />
  <input type="submit" value="Upload" />
</form>

Bunun yerine HTML 5 + Ajax kullanmak istersek şöyle yaparız. Burada AJAX kütüphanesi olarak tarayıcıda yerleşik bulunan window.fetch kullanılıyor

<!-- HTML5 Input Form Elements -->
<input id="fileupload" type="file" name="fileupload" /> 
<button id="upload-button" onclick="uploadFile()"> Upload </button>

<!-- Ajax JavaScript File Upload Logic -->
<script>
  async function uploadFile() {
    let formData = new FormData(); 
    formData.append("file", fileupload.files[0]);
    await fetch('/fileuploadservlet', {
      method: "POST", 
      body: formData
    }); 
    alert('The file has been uploaded successfully.');
  }
</script>

Örnek - single file upload vs multiple files

Şöyle yaparız. Tek <input> var ancak birisinde multiple yazıyor

<form class="mt-3" action="upload/file/single" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label>User</label>
    <input type="text" name="user-name"><br/><br/>
    <label >Single</label>
    <input type="file" name="fileToUpload" id="fileToUpload1">
  </div>
  <div class="form-group mt-3">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

<form class="mt-3" action="upload/file/multi" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label>Multi</label>
    <input type="file" name="files" id="files" multiple>
  </div>
  <div class="form-group mt-3">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

method Alanı

Açıklaması şöyle. action alanı ile belirtilen adrese GET, POST Http verb'lerinden hangisini kullanarak erişmek istediğimizi belirtiriz. Varsayılan yöntem olarak POST kullanılır

<form></form> html element can only have method POST or GET:

Örnek
PUT için şöyle yaparız.

<form method="POST" ...>
  <input type="hidden" name="_method" value="PUT" />
</form>

submit Event

submit event'ine kendi kodumuzu takabiliriz.

Örnek

Şöyle yaparız

const form = document.querySelector("#your-form")
const url = "https://jsonplaceholder.typicode.com/posts"

form.addEventListener('submit', e => {
  e.preventDefault()

  const data = new FormData(e.target)
 
  fetch(url, {
    method: 'POST',
    body: new URLSearchParams(data)
  })
})  

onReset metodu

Örnek

Şöyle yaparız

<form id="form" onreset="resetForm()">
  <label>Enter Text: <input type="text"></label>
  <button type="reset">Reset form</button>
</form>

function resetForm() {
  const display = document.getElementById('display');
  display.textContent = `Form Got Reset on: ${(new Date())}`;
}

onSubmit metodu

submit düğmesine tıklanınca çalıştırılacak kodu belirtir.

Örnek
Şöyle yaparız.

<form action="ac.php" onsubmit="onSubmitAction(this)">
  <input type="text" id="test">
  <input type="submit">
</form>

Form submit düğmesine tıklanınca kod şöyle çalıştırılır

function onSubmitAction(elem) {
  var test = document.getElementById('test');
  if (test.value === 'aaa') {
    elem.setAttribute('action', 'bc.php');
  }
}

Örnek
Elimizde şöyle bir HTML olsun

<form onSubmit="check(event)">
  <input id="name" class="btn" type="file" name="pic" multiple>
  <button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>

Sayfanın tekrar yüklenmemesi için event.preventDefault() çağrısı kullanılır. Şöyle yaparız

function check(event) {
  event.preventDefault();
  console.log("stopped form submit");
}

target Alanı

Açıklaması şöyle

_blank : The response is displayed in a new browser window or tab.

_self : The response is displayed in the current window. This is the default value of the Target attribute.

_parent : The response is displayed in the parent frame

_top : The response is displayed in the full body of the window

Örnek

Şöyle yaparız

<form action="/testpage.php" target="_blank">
<form action="/testpage.php" target="_self">
<form action="/testpage.php" target="_parent">
<form action="/testpage.php" target="_top">