HTML Form


Forms







Select your age:









<h1>Forms</h1>

<form action="register.php" method="post">
   <label for="username">Username: </label><br/>
   <input type="text" id="username" name="username" placeholder="username" required>
   <br>
   <label for="email">Email: </label> <br/>
   <input type="email" id="email" name="email" placeholder="email"> <br>
   <label for="password">Password: </label> <br>
   <input type="password" id="password" name="password"
           placeholder="password">  <br>

 <p>Select your age: </p>
   <input type="radio" name="age" value="0-25" id="option-1">
   <label for="option-1">0-25</label>

   <input type="radio" name="age" value="26-40" id="option-2">
   <label for="option-2">26-40</label>

   <input type="radio" name="age" value="41-50" id="option-3">
   <label for="option-3">50+</label>

   <br>
   <br>
   <label for="question">Security Questions: </label>
   <select name="question" id="question">
      <option value="q1">What color are your favourite pair of socks?</option>
       <option value="q2">What is your best friend?</option>
       <option value="q3" selected>What is your security
            question?</option>
   </select>
   <br/>
   <label for="answer">Security question answer: </label>
   <input type="text" id="answer" name="answer"> <br>

   <label for="bio">Your Bio</label> <br>
   <textarea name="bio" id="bio" cols="30" rows="10"
              placeholder="Enter your bio..."></textarea>

   <br><br>

   <input type="submit" value="submit the form" name="submit">

   </form>

* Thẻ "form"

<form action="register.php" method="post">
	<input type="submit" value="submit the form" name="submit">
 </form>

=> Form cần method "post" để gửi dữ liệu lên server. Khi nhấn submit form thì sẽ dùng action để chuyển tới file "register.php" để xử lý. Trong form cần phải có 1 nút submit. Ta dùng input type là "submit" value là giá trị ta sẽ thấy trên nút submit, name là tên của button submit. Mỗi input cần đặt 1 name.

* Thẻ "input"

   <label for="username">Username: </label><br/>
   <input type="text" id="username" name="username" placeholder="username" required>

=> Thẻ input có nhiều type ví dụ trên type là "text", type có thể là "password", "email", "submit", "radio","checkbox" v..v.

Mỗi thẻ cần name ví dụ này là "username", name này muốn đặt gì thì tùy chúng ta. placeholder là đoạn text hiện trên input khi chưa nhập dữ liệu vào. id ta đặt để dùng javascript lấy giá trị trên input. Ta nên đặt mỗi một input một giá trị id khác nhau. id này muốn đặt gì tùy mỗi người. required là yêu cầu trường input này bắt buộc phải có giá trị, không được để trống.

* Thẻ "label"

Thẻ label dùng để đặt 1 đoạn text. Và label có thuộc tính for. Trong ví dụ trên for ="username" có nghĩa là label này dùng cho input có name là "username". Khi đó ta chỉ cần click vào label thì ta sẽ nhập được trên input.

   <label for="username">Username: </label><br/>
   <input type="text" id="username" name="username" placeholder="username" required>


* Thẻ "select"

 <select name="question" id="question">
      <option value="q1">What color are your favourite pair of socks?</option>
       <option value="q2">What is your best friend?</option>
       <option value="q3" selected>What is your security
            question?</option>
 </select>

=> Thẻ select có name là "question" và giá trị là các value. Tùy chúng ta chọn option nào mà sẽ có giá trị là "q1","q2","q3".

=> Mặc định thì sẽ hiện option đầu tiên. Nếu ta muốn option nào hiện đầu tiên thì ta thêm "selected" vào.

 <select name="question" id="question">
      <option value="q1">What color are your favourite pair of socks?</option>
       <option value="q2" selected >What is your best friend?</option>
       <option value="q3" >What is your security
            question?</option>
 </select>



* Thẻ "textarea"

<textarea name="bio" id="bio" cols="30" rows="10"
              placeholder="Enter your bio..."></textarea>

=> Thẻ textarea cũng có name, id, placeholder và có thêm cols , rows, ta định ra số cột và số hàng.