Skip to content
Postman API Testing Tips

How To Use Post In Postman With Html Based Code

API Testing Blog

Sending HTML Data with POST Requests in Postman

Postman is a powerful tool for testing APIs and its flexibility extends to sending various data formats, including HTML. This guide will walk you through the process of crafting and executing POST requests with HTML payloads in Postman.

Understanding HTML in POST Requests

When sending HTML data with POST requests, the key is to understand how the server expects to receive it. Typically, servers will either expect:

  1. Raw HTML: The HTML content is sent as plain text within the request body.
  2. Form-encoded data: The HTML content is encoded as a form with name-value pairs.

1. Sending Raw HTML Data

To send raw HTML data, follow these steps:

  1. Create a POST request: Open Postman and create a new request. Select the POST method.
  2. Set the URL: Enter the API endpoint URL you want to target.
  3. Choose the Body Tab: In the request body section, select the raw tab.
  4. Select the Content Type: From the dropdown menu, choose text/html.
  5. Enter the HTML: Paste your HTML code directly into the text area.

Example:

Let’s say you have an API endpoint that accepts HTML content for creating a new blog post.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My New Blog Post</title>
</head>
<body>
  <h1>Welcome to my Blog</h1>
  <p>This is the first post on my blog.</p>
</body>
</html>

Postman Request:

  1. Method: POST
  2. URL: https://api.example.com/blog/posts
  3. Body:
    • raw
    • Content Type: text/html
    • Paste the HTML code from above

2. Sending Form-Encoded HTML Data

This approach is useful if the server anticipates receiving HTML data in a form with named fields.

  1. Create a POST request: Similar to the first approach, create a POST request and set the URL.
  2. Choose the Body Tab: Select the form-data tab.
  3. Add a Key: Click “Add key” and provide a descriptive key. For instance, use “htmlContent.”
  4. Choose the Value Type: Select “text” as the value type.
  5. Enter the HTML: Paste your HTML code into the value field.

Example:

Let’s assume you have an API that expects HTML data for a new product page within a specific form field.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Product Page</title>
</head>
<body>
  <h1>My Awesome Product</h1>
  <p>This is a great product description.</p>
</body>
</html>

Postman Request:

  1. Method: POST
  2. URL: https://api.example.com/products/new
  3. Body:
    • form-data
    • Key: “htmlContent”
    • Value Type: “text”
    • Value: Paste the HTML code from above

Sending HTML Data Using Variables

You can also use variables within your HTML code to make your requests more dynamic.

  1. Define Environment Variables: In Postman’s environment section, create a variable like “productName” and assign it a value (e.g., “My Amazing Product”).
  2. Use the Variable in the HTML: Within your HTML code, replace the product name with the variable: <h1>{{productName}}</h1>.
  3. Send the Request: When you send the request, Postman will dynamically replace the variable with its assigned value.

Example:

Environment Variable:

  • Key: productName
  • Value: My Amazing Product

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>{{productName}} Page</title>
</head>
<body>
  <h1>{{productName}}</h1>
  <p>This is a great product description.</p>
</body>
</html>

Postman Request:

  1. Method: POST
  2. URL: https://api.example.com/products/new
  3. Body:
    • form-data
    • Key: “htmlContent”
    • Value Type: “text”
    • Value: Paste the HTML code from above

Testing with HTML Requests

After sending your HTML data, review the response from the server. Check the status code and the response body to ensure the server successfully received and processed your HTML payload.

Handling Server-Side Processing

Make sure the API you’re interacting with is designed to accept and process HTML data. This often involves utilizing server-side frameworks or libraries that can handle HTML parsing and rendering.

This guide explains how to use POST in Postman with HTML based code. We covered sending raw HTML data, form-encoded data, and utilizing variables. Always ensure that your API is equipped to handle HTML data correctly and review the server’s response to validate your interaction.

API Testing Blog