Ordinary button (input type="button")

Basic Concepts of the Ordinary Button (input type="button")

<input type="button"> is one of the most basic button types in HTML form elements. Unlike submit buttons, it does not automatically submit forms, nor does it reset form data like reset buttons. Instead, developers need to define its behavior using JavaScript. This type of button is typically used to trigger custom JavaScript functions or actions.

<input type="button" value="Click Me" onclick="alert('Button clicked!')">

Attributes of Ordinary Buttons

Ordinary buttons support various standard HTML attributes:

• value: Defines the text displayed on the button
• name: The name of the button, used for identification during form submission
• disabled: Disables the button
• autofocus: Automatically focuses the button when the page loads
• form: Specifies the form to which the button belongs

<input type="button" 
       value="Disabled Example" 
       name="demoBtn" 
       disabled
       form="form1">

Differences from the button Element

<input type="button"> and the <button> element are similar but have important differences:

1. <button> can contain HTML content, while <input> can only display plain text
2. The type attribute of <button> defaults to "submit," whereas <input type="button"> does not submit forms
3. <button> has special behaviors in older versions of IE

<!-- Input button -->
<input type="button" value="Ordinary Button">

<!-- Button element -->
<button type="button">
    <i class="icon"></i> Button with Icon
</button>

JavaScript Interaction

Ordinary buttons typically require JavaScript to function. Events can be bound in multiple ways:

<input type="button" id="jsBtn" value="JavaScript Interaction">

<script>
    // Method 1: Via the onclick attribute
    document.getElementById('jsBtn').onclick = function() {
        console.log('Method 1: Button clicked');
    };
    
    // Method 2: Via addEventListener
    document.getElementById('jsBtn').addEventListener('click', function() {
        console.log('Method 2: Button clicked');
    });
</script>

Style Customization

Although the default style of ordinary buttons is simple, they can be deeply customized with CSS:

<style>
    .custom-btn {
        padding: 10px 20px;
        background: linear-gradient(to bottom, #4CAF50, #45a049);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s;
    }
    
    .custom-btn:hover {
        background: linear-gradient(to bottom, #45a049, #3d8b40);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
</style>

<input type="button" class="custom-btn" value="Custom Styled Button">

Usage in Forms

In forms, ordinary buttons are often used to trigger non-submission actions:

<form id="userForm">
    <input type="text" name="username" placeholder="Username">
    <input type="button" value="Check Username Availability" onclick="checkUsername()">
    <input type="submit" value="Submit">
</form>

<script>
    function checkUsername() {
        const username = document.querySelector('#userForm [name="username"]').value;
        alert(`Checking username: ${username}`);
        // In actual development, there would be an AJAX request here
    }
</script>

Accessibility Considerations

Add appropriate accessibility attributes to ordinary buttons:

<input type="button" 
       value="Close Dialog" 
       aria-label="Close the currently open dialog"
       accesskey="c"
       tabindex="0">

Practical Use Cases

1. Dialog control:

<input type="button" value="Open Settings" onclick="openSettings()">
<input type="button" value="Close" onclick="closeDialog()">

2. Pagination control:

<input type="button" value="Previous Page" onclick="goToPrevPage()">
<input type="button" value="Next Page" onclick="goToNextPage()">

3. Game control:

<input type="button" value="Start Game" class="game-control" onclick="startGame()">
<input type="button" value="Pause" class="game-control" onclick="pauseGame()">

Browser Compatibility

<input type="button"> is well-supported in all modern browsers, including:

• Chrome 1+
• Firefox 1+
• Safari 1+
• Opera 6+
• Edge 12+
• IE 4+

For older versions of IE, note that some CSS styles may behave inconsistently.

Performance Considerations

When using many ordinary buttons, keep in mind:

• Avoid binding events to each button individually; use event delegation instead
• Complex CSS styles may impact rendering performance
• Be mindful of memory management for dynamically created buttons

<div id="buttonContainer">
    <input type="button" value="Button 1">
    <input type="button" value="Button 2">
    <!-- More buttons... -->
</div>

<script>
    // Use event delegation instead of binding to each button individually
    document.getElementById('buttonContainer').addEventListener('click', function(e) {
        if(e.target.type === 'button') {
            console.log('Clicked:', e.target.value);
        }
    });
</script>

Mobile Adaptation

For mobile devices, ordinary buttons require special consideration:

• Increase the clickable area size
• Avoid hover states
• Handle touch feedback

@media (max-width: 768px) {
    input[type="button"] {
        min-width: 44px;
        min-height: 44px;
        padding: 12px 24px;
    }
}

Integration with Frameworks

Using ordinary buttons in modern frontend frameworks:

React example:

function MyComponent() {
    const handleClick = () => {
        console.log('Button clicked');
    };
    
    return (
        <input 
            type="button" 
            value="React Button" 
            onClick={handleClick}
        />
    );
}

Vue example:

<template>
    <input 
        type="button" 
        value="Vue Button" 
        @click="handleClick"
    />
</template>

<script>
export default {
    methods: {
        handleClick() {
            console.log('Button clicked');
        }
    }
}
</script>

Security Considerations

When using ordinary buttons, note:

• Do not rely on client-side validation
• Sensitive actions should have confirmation prompts
• Prevent duplicate clicks

<input type="button" value="Delete Account" onclick="confirmDelete()">

<script>
let isDeleting = false;

function confirmDelete() {
    if(isDeleting) return;
    
    if(confirm('Are you sure you want to delete your account? This action cannot be undone!')) {
        isDeleting = true;
        // Perform deletion
    }
}
</script>

Testing

Writing automated tests for ordinary buttons:

<input type="button" id="testBtn" value="Test Button">

<script>
// Unit test example (using Jest)
describe('Button Test', () => {
    beforeEach(() => {
        document.body.innerHTML = `
            <input type="button" id="testBtn" value="Test Button">
        `;
    });
    
    test('Button click triggers event', () => {
        const btn = document.getElementById('testBtn');
        const mockFn = jest.fn();
        btn.onclick = mockFn;
        
        btn.click();
        expect(mockFn).toHaveBeenCalled();
    });
});
</script>

Advanced Usage

1. Creating button groups:

<div class="btn-group">
    <input type="button" value="Left" class="btn-group-item">
    <input type="button" value="Middle" class="btn-group-item">
    <input type="button" value="Right" class="btn-group-item">
</div>

<style>
.btn-group {
    display: flex;
}
.btn-group-item {
    border-radius: 0;
    margin-right: -1px;
}
.btn-group-item:first-child {
    border-radius: 4px 0 0 4px;
}
.btn-group-item:last-child {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
}
</style>

2. Loading state:

<input type="button" id="loadBtn" value="Load Data">

<script>
document.getElementById('loadBtn').addEventListener('click', function() {
    const btn = this;
    const originalText = btn.value;
    
    btn.value = 'Loading...';
    btn.disabled = true;
    
    // Simulate async operation
    setTimeout(() => {
        btn.value = originalText;
        btn.disabled = false;
    }, 2000);
});
</script>