Blood Group Selection For HTML, JavaScript And PHP


Blood Group Code Snippets You'll find ready-to-use code to implement blood group selection in your web applications. Our blood group list includes all common types (A+, A-, B+, B-, AB+, AB-, O+, O-) and an option for rare blood types, making it comprehensive for most medical and health-related applications.

We provide three easy-to-copy formats: an HTML dropdown, a JavaScript array, and a PHP array. These snippets are designed for quick integration, saving you time and ensuring consistency in your projects.

Create Custom Blood Groups for Your Needs

Choose your desired blood group from the options provided in the table. You can integrate the selected blood group into a dropdown menu, a JavaScript array, or a PHP array. The corresponding code will be displayed below.

# Blood Groups Select
1(A+) a-positive
2(A-) a-negative
3(B+) b-positive
4(B-) b-negative
5(AB+) ab-positive
6(AB-) ab-negative
7(O+) o-positive
8(O-) o-negative
9(Rare Blood Types) rare

HTML Drop Down

Use this as a standalone form element for static web pages. It includes all common blood types and a option for rare blood types

HTML
<select id="blood-group" name="blood-group">
    <option value="">Select Blood Group</option>
    <option value="a-positive">A+</option>
    <option value="a-negative">A-</option>
    <option value="b-positive">B+</option>
    <option value="b-negative">B-</option>
    <option value="ab-positive">AB+</option>
    <option value="ab-negative">AB-</option>
    <option value="o-positive">O+</option>
    <option value="o-negative">O-</option>
    <option value="rare">Rare Blood Types</option>
</select>

JavaScript Array

JavaScript array of blood group selection. Perfect for dynamic web applications. This array can be used to generate the select options on the client-side, enabling interactive features like filtering or conditional displays based on blood type selection.

JavaScript
const bloodGroups = [
    { value: "a-positive", label: "A+" },
    { value: "a-negative", label: "A-" },
    { value: "b-positive", label: "B+" },
    { value: "b-negative", label: "B-" },
    { value: "ab-positive", label: "AB+" },
    { value: "ab-negative", label: "AB-" },
    { value: "o-positive", label: "O+" },
    { value: "o-negative", label: "O-" },
    { value: "rare", label: "Rare Blood Types" }
];

Usage Example

Use this array to create a dropdown menu

HTML
<select id="blood-group">
  <option value="">Select Blood Group</option>
</select>
javaScripr
const bloodGroupSelect = document.getElementById("blood-group");

bloodGroups.forEach(group => {
    const optionElement = document.createElement("option");
    optionElement.value = group.value;
    optionElement.textContent = group.label;
    bloodGroupSelect.appendChild(optionElement);
});

Try it your self Real Time Preview

PHP Array

PHP Array of blood group selection. Ideal for server-side processing. Use this array to populate select options dynamically, validate submitted data, or integrate with database operations in your PHP applications

PHP
<?php
$bloodGroups = [
    "a-positive" => "A+",
    "a-negative" => "A-",
    "b-positive" => "B+",
    "b-negative" => "B-",
    "ab-positive" => "AB+",
    "ab-negative" => "AB-",
    "o-positive" => "O+",
    "o-negative" => "O-",
    "rare" => "Rare Blood Types"
];
?>

Usage Example PHP Array

Here is a simple example of using this array to create an HTML select option.

PHP
<?php
$html = '';
foreach ($bloodGroups as $value => $group) {
    $value = strtolower($value);
    $text = htmlspecialchars($group);
    $html .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
}
?>

<select id="blood-groups">
  <option value="">Select blood group</option>
	<?php echo $html ?>
</select>

Use Cases

Blood group code snippets can be applied in various healthcare and medical scenarios. Here are some practical use cases

  • Patient Registration Forms

  • Blood Donation Websites

  • Hospital Management Systems

  • Medical Research Applications

  • Health and Fitness Apps