1)创建表单

基本语法

  1. 1、添加一个表单
  2. 使用<form action=”url 地址” method=”” ></form> 添加一个表单,表单用于向服务器传输数据。
  3. 2、action 属性
  4. 规定当提交表单时向何处发送表单数据。
  5. URL可以使绝对路径,也可以是相对路径
  6. 绝对 URL - 指向其他站点
  7. 相对 URL - 指向站点内的文件
  8. 3、method 属性
  9. 规定用于发送 表番 的 HTTP 方法。
  10. 有两种:post、get。

功能

标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。

2)表单元素

标签

1、输入类型:text

基本语法

功能

定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

2、输入类型:password

基本语法

功能

定义密码字段。该字段中的字符被掩码。

3、单选按钮 radio

基本语法


功能

定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

注:单选按钮 radio,必须有name 属性并且 name 必须保持一致。

4、复选框 checkbox

基本语法

功能

定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

5、点击按钮button

基本语法

功能

定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击。

6、重置按钮 reset

基本语法

功能

定义重置按钮。重置按钮会清除表单中的所有数据。

7、提交按钮 submit

基本语法

功能

定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

8、文件上传 file

基本语法

功能

用于文件上传。
注:1、type 属性
type 属性规定 input 元素的类型

2、value 属性
规定 input 元素中的默认值。

3、name 属性
规定 input 元素的名称,用于对提交到服务器后的表单数据进行标识。
单选、复选按钮必须有name 属性并且 name 必须保持一致。

4、checked属性
规定此 input 元素首次加载时默认选中。

5、重置按钮的使用
重置按钮需要配合表单来使用,如果没有表单

重置不起作用。

6、提交按钮的使用
提交按钮需要配合表单来使用。
提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。



功能

元素用来创建下拉列表。
元素中的

功能

定义多行的文本输入控件。
文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体。
注:1、cols 属性
规定文本区域内可见的宽度。

2、rows 属性
规定文本区域内可见的行数。

3)表单元素样式

示例

<input>标签样式           

        .txt1{
                width:1000px;
                height:30px;
                font-size:20px;
                color:yellow;
                text-align:right;
                padding-right:20px;
                border:1px solid orange;
                border-radius:8px;
                background-color:lightgreen;
        }

        width:1000px;   设置input文本输入框的宽度为1000像素
        height:30px;   设置input文本输入框的高度为30像素
        font-size:20px;  设置input文本输入框的文字大小为20像素
        color:yellow;   设置input文本输入框的字体颜色为黄色
        text-align:right;  设置input文本输入框的文本距中显示
        padding-right:20px;  设置input文本输入框的右内边距为20像素
        border:1px solid orange;  设置input文本输入框的边框为1像素的桔色实线
        border-radius:8px;  设置input文本输入框的圆角为8像素
        background-color:lightgreen;  设置input文本输入框的背景色为绿色