Skip to content

Instantly share code, notes, and snippets.

@YasirGaji

YasirGaji/interface.html

Last active December 26, 2021 16:02
Show Gist options
  • Save YasirGaji/453580a956c219dba1d6a112d399c920 to your computer and use it in GitHub Desktop.
Save YasirGaji/453580a956c219dba1d6a112d399c920 to your computer and use it in GitHub Desktop.
Download ZIP
This html collection gist is for "The Javascript Events" article by Yasir Gaji
Raw
interface.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Form Interface For Events Test</title>
</head>
<body>
<div class="container">
<h3>Form Interface For The JS Events Test By <a href="https://yasirgaji.dev" target="_blank">Yasir Gaji</a></h3>
<form action="index.php" method="post">
<div class="form-area">
<div class="row">
<div class="six columns">
<label for="event_name">Event Name</label>
<input type="text" name="event_name" id="event_name" placeholder="Event Name" required>
</div>
<div class="six columns">
<label for="event_date">Event Date</label>
<input type="date" name="event_date" id="event_date" placeholder="Event Date" required>
</div>
</div>
<div class="row">
<div class="six columns">
<label for="event_time">Event Time</label>
<input type="time" name="event_time" id="event_time" placeholder="Event Time" required>
</div>
<div class="six columns">
<label for="event_location">Event Location</label>
<input type="text" name="event_location" id="event_location" placeholder="Event Location" required>
</div>
</div>
<div class="row">
<div class="six columns">
<label for="event_description">Event Description</label>
<textarea name="event_description" id="event_description" placeholder="Event Description" required></textarea>
</div>
<div class="six columns">
<label for="event_image">Event Image</label>
<input type="text" name="event_image" id="event_image" placeholder="Event Image" required>
</div>
</div>
<div class="row">
<div class="six columns">
<label for="event_url">Event URL</label>
<input type="text" name="event_url" id="event_url" placeholder="Event URL" required>
</div>
<div class="six columns">
<label for="event_price">Event Price</label>
<input type="text" name="event_price" id="event_price" placeholder="Event">
</div>
</div>
</div>
<div class="row">
<div class="six columns">
<input type="submit" value="Submit">
</div>
<div class="six columns">
<input type="button" value="Clear Form" class="clear-form">
</div>
</div>
</form>
</div>
<script src="/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment