HTML中的表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,

表单的作用是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具，人机交互。

表单用<form>标签表示

基本结构:

<form action="" name=""></form>

属性名

属性值

说明

name

字符串

给表单命名

method 

get

表单传输方式

将表单数据以名称/值对的形式附加到 URL 中（可见）

post

将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）安全

 action

 url

 传输目标地址

enctype

application/x-www-form-urlencoded
multipart/form-data （发送文件）
text/plain

规定在向服务器发送表单数据之前如何对其进行编码。

（适用于 method="post" 的情况）

 

 

 

 

 

 

 

 

表单元素类型

通用格式（除textarea、select）

<input  type=”类型”   name=””  value=””>

两个属性：name   value   非常重要，在后期需要赋值与调取

 一、文本类型

    1、文本框

不可操作        ---disabled  （属性名与属性值相同的可只写属性名）

只读           --readonly

默认提示字        ---placeholder   （placeholder =””）

    2、密码框

    3、隐藏域

    4、多行文本

          特殊格式：

<textarea name=""  id=""  cols="30"  rows="10"></textarea>

多行文本框可随意拖动     添加resize：none属性，禁止拖动
二、选择类型
   1、单选
<input  type="radio">内容

        1>不可操作-   --disabled

        2>默认选中

        只能选择一个时，需要在input属性中添加name属性，并添加相同的属性值

       label 标签，点选时，可扩展到文字，不必只能点击圆点。input标签放在label标签内。

多选

<input  type="checkbox">内容

 

        默认选中项加属性

       3、下拉框

       1>默认选中   selected   （是option的属性）

       2>全部显示   multiple   （是select的属性）  

       3>显示多条   size       （是select的属性） (size=”数字”)

特殊格式：下拉框（组合标签）

<select  name="" id="">
    <option value="">内容1</option>
    <option value="">内容2</option>
</select>

   下拉框的值，就是option里的value值，如果option里没有value属性，就是option内容

三、按钮类型

     1、普通按钮

<input  type="button" value="内容">

  2、提交按钮    ---submit        （提交到form表单的内容，只在form内有效）

     也可以直接用   <button> </button>

  3、复位按钮   -----reset        (清空form表单内的内容，form外的无关)

四、文件类型  ---file

    上传栏位:<input type="file" name="file">

    需要在form中添加属性enctype="multipart/form-data"

五、图片类型

">

 

表单加上外框和标题

 

外 边 框:<fieldset>...</fieldset>  

 

标　　题:<legend>...</legend>

 

 

补充：

格式化标签<pre></pre>,里面内容与书写一致，显示空格、回车等。