<body>
    <form id="form">
        <p>
            <label>
                <span>必須チェック: </span>
                <input type="text" required title="「banana」もしくは「cherry」を入力してください。">
            </label>
        </p>
        <p>
            <label>
                <span>メールアドレス形式チェック: </span>
                <input type="email" required>
            </label>
        </p>
        <p>
            <label>
                <span>特定の形式チェック: </span>
                <input type="text" title="「banana」もしくは「cherry」を入力してください。" required pattern="[Bb]anana|[Cc]herry">
            </label>
        </p>
        <p>
            <button>submit</button>
        </p>
    </form>
</body>
(() => {
	window.addEventListener('DOMContentLoaded', () => {
		const form = document.getElementById('form');

		form.addEventListener(
			'submit',
			(e) => {
				e.preventDefault();
				alert('submit!');
			},
			{ passive: false }
		);
	});
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.