您的位置: 首页  >  IT文章  >  HTML第十四章总结 HTML forms 第十四章主要讲了 html forms,通过 forms，我们可以得到 customers' feedback,使得网页能够 interactive,本章的内容分为三个部分： How forms work?两个方面阐述 语法以及相关的 attribute 其他类型 实际操作： Back to get those  into your HTML

HTML第十四章总结 HTML forms 第十四章主要讲了 html forms,通过 forms，我们可以得到 customers' feedback,使得网页能够 interactive,本章的内容分为三个部分： How forms work?两个方面阐述 语法以及相关的 attribute 其他类型 实际操作： Back to get those  into your HTML

分类: IT文章 • 2023-11-06 11:51:48
  1. forms 的 element 以及它们的 attribute.
  2. forms 进行交互的原理
  3. 如何对 forms 进行 style

How forms work?两个方面阐述

Web Server 的角度

接收

  1. 当 visitor 在一个网页上 fill out the form 并且之后 submit 了之后
  2. Browser pakages up all the data in the form and sends it over to the Web Sever.
  3. 然后Web Server 接收到之后，再将其传给里面的 Server Script 去让它 process
    ###返回
  4. Server Script 对 data 进行 process 了之后，创建一个新的 HTML 文件，然后把它传给 Web Server
  5. Web Server 得到这个 HTML 文件之后，将它再传给 Browser.
  6. 然后 Browser 得到这个界面并且 display it.

Browser 的角度

  1. 当它 encounter 到 
    element 的时候，开始 create 相关的 controls, 所谓的 control 是：allow you to input various kinds of data 的地方。
  2. 当 visitor fill out 了 form 之后，并且进行了 submit， Browser 将 data 进行 package up,然后将它发送给 Web Server.
  3. 最后，接收到 Web Server 返回来的文件，然后 display it.

语法以及相关的 attribute

关于<form>

形式：

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
/*(Everything inside the form)*/
</form>

参数：

  • action:这个 attribute 包含了 Web Server 的 URL 以及Server Script 的位置。
  • method 分为两种： POST 和 GET，
  • </form>这个 closing tag 用来 ends the form

关于 method 这个 attribute

GET :会在发送给 Web Server 之前 显示 append the data on the end of the URL ，并且你可以 bookmark 这个网址，缺点每次打开这个网址时，会 resubmited the order,所以不适用于 order 或者 密码，个人信息等网页
POST：你不能 bookmark 这个网址。但是更加安全，没有办法通过 History 查看，可以用于 密码，个人信息等网站。

form elements that create controls 关于<form>中的 element

<input>类型：

形式：<input type="" name="address">

经典的 type attribute:

  • type="text" name=""
  • type="submit":可以通过“value="Order Now""这个 attribute 来更改其显示的内容。
  • type="radio" name="hotornot" value="not"
  • type="checkbox" neme="spice[]" value="Garlic"

HTML5 中的 type attrubute:

  • type=" telurle-mail "：实质上是一种 text 类型的 input ，但是在手机上显示的时候可以控制其 UI，比如显示相应的数字键盘。
  • type="number min="0" max="20" 可以设置 max 和 min 这两个 attribute 来设置其最大值和最小值，数字都为整数。
  • type="color"
  • type="range" max="0" max="20" step="5" ：这个 attribute 和 number 很相似，但是是以 slider 的方式显示的，其中的 step 为一个 optional attribute.
  • type="date"

其他类型

  1. textarea <textarea name="comments" rows="10" cols="48"></textarea>用于 create a multiline text area that you can type into ，其中的 cols 和 rows 用于限制 text area 的宽度和高度。在<textarea>和</textarea>之间的内容鬼称为 initial text in the browser's text area control
  2. select 和 option<select>和<option>是一对搭档，互不分离，select 用于 create a menu control in the web page.select 用于create every menu item.它的形式是：
<select name="characters">
    <option value="Buckarpp">Buckaroo Banzai</option>
    <option value="Tommy">Perfect Tommy</option>
</select>

关于 name 这个 attribute

How form element "name" work:
It acts as the glue between your form and the server script that processes it.
在 Browser 向 Web Server 传递信息的过程中，Browser send the names and values to the server.

注意

  1. 这里的 name 需要注意的是：它是由 Script 所限定的，不是自定义的，写 Script 的人应该 tell you what names to use, or provide that information in the documentation for the script.
    2.<option>没有name,但是<select>有，原因在于name 的原理
  2. 对于 checkbox 和 radio 来说，由于它们 come as a set ，所以对于一系列选项来说，它们的 name 是相同的。

实际操作： Back to get those <input> into your HTML

需要注意的是：
1.<input>是一种 inline element，一方面为了美观整齐，用<br>换行；另外一方面，整个相关联的数据用<p>包括起来。

  1. 在<input>之前或者之后添加lable，作为表明给 visitor 的要输入的数据。

其他小知识：

  1. 如果想要在<radio><checkbox>中默认选择一项，那么就用 checked 这个 boolean attribute.
  2. 在 CSS 中可以用 table display 对 form 进行设计
  3. 其他attribute：
    placeholder equired 可以进行提示和限制必须填写，其中 required 是一个 boolean 类型的数据
    multiple 是可以在 <select>中添加的，显示的时候不再是下拉列表，而是数据的全部排列，可以使用 control 键进行多选。
    type="file"可输入文件类型数据
    type="password"可输入密码类型数据
    用<fieldset>来 group together comman elements,配合使用<legend>来显示标题。 <lable for="">中的 for 这个 attribute 是 form element 中的 id 的名称,所以创建 lable 有两个步骤： 创建 element 的id
    然后创建 lable 设定 for 的值





相关推荐