<香港科技大学html+css+js课堂笔记>week1--Form相关

1.Form：

1>格式：

<formaction="destination" method="get or post">
. . . form elements go here . . .
    <input type="submit">
</form>

 

2>传递方式：

get：安全性差，可在URL中显示，只可传递少部分数据；

post:安全性高，不在URL中显示，可传递文件.

 

3>eg: add asubmit button:

<form action="http://ihome.ust.hk/~rossiter/cgi­bin/show_everything.php"
      method="get">
  <p>Please enter any feedback you have.</p>
  <textarea rows="3" cols="60"name="feedback" >
  Please enter your text here
  </textarea>
  <br>
  <input type="submit" value="Send">
</form>

2.more Formknowledge:

1>radio andcheckbox:

Eg1:

<form>

 Please enter your name. <br>

 <input type="text" name="feedback"> <br> <br>

 Please select each of the following that you have. <br>

 <input type="checkbox" name="items" value="car">Car <br>

  <input type="checkbox" name="items" value="teddy bear">Teddy bear <br>

 <input type="checkbox" name="items" value="toothbrush">Toothbrush <br> <br>

 

 Please indicate your intelligence level. <br>

 <input type="radio" name="iq" value="high">High <br>

 <input type="radio" name="iq" value="medium" checked>Medium <br>

 <input type="radio" name="iq" value="low">Low <br> <br>

</form>

 

2>password andsubmit:

Eg:

<form action="http://ihome.ust.hk/~rossiter/cgi­bin/show_everything.php">

 <p>What is the secret password?</p>

 <input type="password" name="userpassword"> <br> 

 <input type="submit" value="Send">

</form>

 

3>select:

Eg:

<form>

 <p>What city would you like to go to?</p>

 

 <select name="cities">

   <option value="hk">Hong Kong</option>

   <option value="vc">Vancouver</option>

   <option value="sf">San Francisco</option>

 </select>

</form>

4>综合：<lable></lable> for属性规定lable绑定哪个表单元素

Eg:

<form>

 <p>Please fill in the following information:</p>

 <label for="firstname">First name:</label>

 <input type="text" name="firstname" value="Dave" autofocus>

  <br>

 <label for="lastname">Last name:</label>

 <input type="text" name="lastname" placeholder="Your last name goes here">

  <br>

 <label for="age">Age:</label>

 <input type="text" name="age" required>

  <br>

 <input type="submit" value="Submit">

</form>

 

3.handle fileupload:

Eg：

<form method="post" enctype="multipart/form­data" 

  action="http://ihome.ust.hk/~rossiter/cgi­bin/show_everything.php">

  <p>Select the file you want to upload</p>

 <input type="file" name="fileToUpload"> 

 <p>Press this button to send it</p>

 <input type="submit" value="Upload the file"> 

</form>

 

4.HTML5 inputelements:

Eg:

<form action="http://ihome.ust.hk/~rossiter/cgi­bin/show_everything.php">

  <label for="age">Your age:</label>

  <input type="number" min="0" max="99" step="1" value="18" name="age" required><br>

  <label for="birthday">Your birthday:</label>

  <input type="date" name="birthday"><br>

  <label for="wakeup">You want to wake up at:</label>

  <input type="time" name="wakeup"><br>

  <label for="color">Your favorite color:</label>

  <input type="color" name="color"> <br>

  <label for="mood">Your mood:</label>

  Bad <input type="range" min="0" max="100" step="5" value="50" name="mood"> Good<br>

  <input type="submit" value="Submit!"> 

</form>

 

5.group andfieldset:

Eg:

<div>

 <fieldset>

   <legend>Defeated Enemies</legend>

   Ice Cream Man <br>

   Super Scary Monster <br>

 </fieldset> <br>

 <fieldset>

   <legend>Friends</legend>

   Flower lady<br>

   Amazon Ant 57 <br>

 </fieldset> <br>

</div>