HTML学习笔记8：表单

 

什么是表单？

    一个网页表单可以将用户输入的数据发送到服务器进行处理。因为互联网用户使用复选框，单选按钮或文本字段填写表格，所以WebForms的形式类似文件或数据库。例如，WebForms可以用来进入航运或信用卡资料订购产品，或可用于检索数据（例如，搜索引擎上搜索）。    <!-- from wiki — >

    

  简单来说就是收集用户的信息

这就是一个表单

表单的工作流程：用户打开页面—>填写表单后提交—>根据相应的方式打包后发送个服务器—>服务器接收后转给相应的程序处理

基础框架：<form></form>

    

    在form下添加表单元素

---

<input>表单输入标签

语法：<input type=“" name=“” ….../>

属性：

    Name：名字，服务器通过name识别组别，同一组别需要相同的name名

    Maxlength：指定输入的最大长度

    Size：文本框的大小，以字符为单位，默认为20

    value：默认值，提交给服务器的内容

    placeholder：提示文本

type：

    text：输入文本，属性：  

    password：密码框，会自动隐藏密码

    file：上传文件，显示的内容与浏览器有关

    radio：单选框，需要单选的选项需要用相同的name，将返回value给服务器以辨别选了什么，添加checked来确定默认选项。

    checkbox：复选框，与radio规则相似。

    Button：配合js提供动作,value值位按钮显示内容

    subm：提交按钮，配合js将一个form内的表单送到服务器，value值位按钮显示内容

    Reset：将一个form内的表单恢复到默认状态，value值位按钮显示内容

    Hidden：隐藏域，用户看不到，将value传给服务器。

    image:图像域提交,与submit功能相同，src放图片地址。

---

<select>下拉菜单和列表标签

语法

<option> 选择的内容 </option>   

    option的属性：

            size：显示的数量，大于1时为列表形式显示。

            multiple：可按住ctrl多选，下拉菜单变列表形式

            selected：默认值

    option里科添加<optgroup>组名</optgroup>来给选项分组

---

<textarea></textarea>多行文本域

    基本与<input>的text一样，多了cols和rows属性。row控制显示的行数，cols显示宽度。

---

form的属性

    action：表单发送的目的地，URL或服务器文件。

       method：指定表单以何种方式发送到服务器，有get、post两种方法，默认为get

                GET：使用URL做传递参数（返回的url能看到表单的内容），对所发送的信息的数量也有限制，一般用于用户信息获取。

                POST：表单数据作为HTTP请求内容的一部分，对所发送信息的数量没有限制，一般用于修改服务器上的资源。

       name：表单的名。

       traget：在何处打开action URL 参数：_blank、_self、_parent、_top

       enctype：在发送表单前如何编码，参数有：1: 默认方式application / x-www-form-urlencoded 2:multipart / form-data 3:text / plain