tabler-ui/src/_includes/cards/http-request.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-header">
		<h3 class="card-title">HTTP Request</h3>
	</div>
	<div class="card-body">
		<div class="row">
			<div class="form-group col-sm-4 col-md-2">
				<label class="form-label">
					Method <span class="form-required">*</span>
				</label>
				<select class="custom-select">
					<option value="GET">GET</option>
					<option value="POST">POST</option>
					<option value="PUT">PUT</option>
					<option value="HEAD">HEAD</option>
					<option value="DELETE">DELETE</option>
					<option value="PATCH">PATCH</option>
				</select>
			</div>
			<div class="form-group col-sm-8 col-md-10">
				<label class="form-label">
					URL <span class="form-required">*</span>
				</label>
				<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
			</div>
		</div>

		<div class="form-label">Assertions</div>
		<div class="table-responsive">
			<table class="table mb-0">
				<thead>
				<tr>
					<th class="pl-0">Source</th>
					<th>Property</th>
					<th>Comparison</th>
					<th class="pr-0">Target</th>
				</tr>
				</thead>
				<tr>
					<td class="pl-0">
						<select class="custom-select">
							<option value="STATUS_CODE" selected>Status code</option>
							<option value="JSON_BODY">JSON body</option>
							<option value="HEADERS">Headers</option>
							<option value="TEXT_BODY">Text body</option>
							<option value="RESPONSE_TIME">Response time</option>
						</select>
					</td>
					<td>
						<input type="text" class="form-control"></td>
					<td>
						<select class="custom-select">
							<option value="EQUALS" selected>Equals</option>
							<option value="NOT_EQUALS">Not equals</option>
							<option value="HAS_KEY">Has key</option>
							<option value="NOT_HAS_KEY">Not has key</option>
							<option value="HAS_VALUE">Has value</option>
							<option value="NOT_HAS_VALUE">Not has value</option>
							<option value="IS_EMPTY">Is empty</option>
							<option value="NOT_EMPTY">Is not empty</option>
							<option value="GREATER_THAN">Greater than</option>
							<option value="LESS_THAN">Less than</option>
						</select>
					</td>
					<td class="pr-0">
						<input type="text" class="form-control" value="200">
					</td>
				</tr>
				<tr>
					<td class="pl-0">
						<select class="custom-select">
							<option value="STATUS_CODE">Status code</option>
							<option value="JSON_BODY" selected>JSON body</option>
							<option value="HEADERS">Headers</option>
							<option value="TEXT_BODY">Text body</option>
							<option value="RESPONSE_TIME">Response time</option>
						</select>
					</td>
					<td>
						<input type="text" class="form-control" value="parameters.alt.type">
					</td>
					<td>
						<select class="custom-select">
							<option value="EQUALS">Equals</option>
							<option value="NOT_EQUALS">Not equals</option>
							<option value="HAS_KEY">Has key</option>
							<option value="NOT_HAS_KEY">Not has key</option>
							<option value="HAS_VALUE" selected>Has value</option>
							<option value="NOT_HAS_VALUE">Not has value</option>
							<option value="IS_EMPTY">Is empty</option>
							<option value="NOT_EMPTY">Is not empty</option>
							<option value="GREATER_THAN">Greater than</option>
							<option value="LESS_THAN">Less than</option>
						</select>
					</td>
					<td class="pr-0">
						<input type="text" class="form-control" value="string">
					</td>
				</tr>
				<tr>
					<td class="pl-0">
						<select class="custom-select">
							<option value="STATUS_CODE">Status code</option>
							<option value="JSON_BODY">JSON body</option>
							<option value="HEADERS">Headers</option>
							<option value="TEXT_BODY">Text body</option>
							<option value="RESPONSE_TIME" selected>Response time</option>
						</select>
					</td>
					<td>
						<input type="text" class="form-control"></td>
					<td>
						<select class="custom-select">
							<option value="EQUALS">Equals</option>
							<option value="NOT_EQUALS">Not equals</option>
							<option value="HAS_KEY">Has key</option>
							<option value="NOT_HAS_KEY">Not has key</option>
							<option value="HAS_VALUE">Has value</option>
							<option value="NOT_HAS_VALUE">Not has value</option>
							<option value="IS_EMPTY">Is empty</option>
							<option value="NOT_EMPTY">Is not empty</option>
							<option value="GREATER_THAN">Greater than</option>
							<option value="LESS_THAN" selected>Less than</option>
						</select>
					</td>
					<td class="pr-0">
						<input type="text" class="form-control" value="500">
					</td>
				</tr>
				<tr>
					<td class="pl-0">
						<select class="custom-select">
							<option value="STATUS_CODE">Status code</option>
							<option value="JSON_BODY">JSON body</option>
							<option value="HEADERS" selected>Headers</option>
							<option value="TEXT_BODY">Text body</option>
							<option value="RESPONSE_TIME">Response time</option>
						</select>
					</td>
					<td>
						<input type="text" class="form-control" value="content-type">
					</td>
					<td>
						<select class="custom-select">
							<option value="EQUALS" selected>Equals</option>
							<option value="NOT_EQUALS">Not equals</option>
							<option value="HAS_KEY">Has key</option>
							<option value="NOT_HAS_KEY">Not has key</option>
							<option value="HAS_VALUE">Has value</option>
							<option value="NOT_HAS_VALUE">Not has value</option>
							<option value="IS_EMPTY">Is empty</option>
							<option value="NOT_EMPTY">Is not empty</option>
							<option value="GREATER_THAN">Greater than</option>
							<option value="LESS_THAN">Less than</option>
						</select>
					</td>
					<td class="pr-0">
						<input type="text" class="form-control" value="application/json; charset=UTF-8">
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="card-footer text-right">
		<button type="submit" class="btn btn-primary">Make request</button>
	</div>
</div>