HTML表单的应用

HTML中的表单

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

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

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

表单用<form>标签表示

基本结构:

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

属性名	属性值	说明
name	字符串	给表单命名
method	get	表单传输方式将表单数据以名称/值对的形式附加到 URL 中（可见）
method	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、文本框 ---text

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

2>只读 --readonly

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

2、密码框 ----password

3、隐藏域 ----hidden

4、多行文本 ----textarea

特殊格式：

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

多行文本框可随意拖动     添加resize：none属性，禁止拖动

二、选择类型

1、单选 ---radio

<input  type="radio">内容

1>不可操作- --disabled

2>默认选中 -checked

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

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

2、多选 ---checkbox

<input  type="checkbox">内容

默认选中项加属性 -checked

3、下拉框 ---<select> <option>

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、普通按钮 ---button

<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"

五、图片类型

图像按钮:<input type="image" src="url" alt="文本">

表单加上外框和标题

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

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

补充：