HTML Form

HTML Form

<form action="#" method="GET">
  <!-- text field -->
  <!-- two ways to assciate a <label> with a form control -->
  <!-- implicit:surround <input> with <label>-->
  <label>username: 
    <input type="text" name="username" placeholder="enter your username">
  </label>
  <!-- explicit: "for" attr is identical to id attr -->
  <label for="password">password: </label>
  <input type="password" name="password" placeholder="enter your password" id="password">
  
  <br>
  <!-- hidden field -->
  <input type="hidden" name="action" value="changes">

  <!-- multiline text areas -->
  Put your address here:
  <textarea name=address cols=40 rows=4>
      Your Name Here
      1234 My Street
      Anytown, State Zipcode
  </textarea>
  <br>

  <!-- radio button -->
  <!-- Radio buttons with the same "name" attribute are members of a group -->
  <input type="radio" name="gender" value="male">man
  <input type="radio" name="gender" value="female" checked>woman
  <br>

  <!-- checkbox -->
  <input type="checkbox" name="pets" value="dog" checked>Dog
  <input type="checkbox" name="pets" value="cat">Cat
  <input type="checkbox" name="pets" value="bird">Bird
  <input type="checkbox" name="pets" value="fish">Fish
  <br>

  <!-- pull-down menu -->
  <select name="hobbies">
    <option value="badminton">Badminton</option>
    <option value="football">Football</option>
    <option value="basketball">Basketball</option>
    <option value="tennis">Tennis</option>
    <option value="golf" selected>Golf</option>
  </select>

  <select name="fruits" multiple>
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="peach">peach</option>
    <option value="orange">orange</option>
  </select>

  <!-- submission button -->
  <input type="submit" >

  <!-- reset button -->
  <input type="reset" >

  <!-- push button -->
  <input type="button" name="key" value="label" onclick="">



</form>
<br>
<!-- must specify method and enctype attributes like these if upload file. -->
<form action="#" method="POST" enctype="multipart/form-data">
  <!-- file-selection -->
  <input type="file" accept="image/*" name="upload_file">
  <br>

  <button type="submit">upoload</button>
  <button type="reset">reset</button>
  <button type="button" name="key" value="not_label" onclick="">just a push button</button>
  
</form>
posted @ 2020-02-07 21:39  bit_happens  阅读(48)  评论(0编辑  收藏  举报