Scribd
Upload
17 views

Mainmenu

The document contains HTML and CSS code to create a registration form with fields for student ID, name, gender, skills, major and buttons to reset, submit or go back. Styling is applied to format labels, fields, buttons and center elements.

Uploaded by

Ying Hui Tan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

Mainmenu

The document contains HTML and CSS code to create a registration form with fields for student ID, name, gender, skills, major and buttons to reset, submit or go back. Styling is applied to format labels, fields, buttons and center elements.

Uploaded by

Ying Hui Tan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>

<html>

<body>

<style>

h1 {text-align: center;}

h1 {color: firebrick;}

.button {

border: none;

color: white;

padding: 20px 60px;

text-align: center;

text-decoration: none;

display: block;

font-size: 15px;

margin: 25px 200px;

transition-duration: 0.4s;

cursor: pointer;

.button1 {

background-color: lightgrey;

color: black;

border: 2px solid grey;

.button1:hover {

background-color: grey;

color: white;

}
.button2 {

background-color: lightgrey;

color: black;

border: 2px solid grey;

.button2:hover {

background-color: grey;

color: white;

.button3 {

background-color: lightgrey;

color: black;

border: 2px solid grey;

.button3:hover {

background-color: grey;

color: white;

.button1 {width: 250px;}

.button2 {width: 250px;}

.button3 {width: 250px;}

</style>

</head>

<body>

<form action="/action_page.php">

<fieldset>

<h1>SSK3408 SYSTEM</h1>
</fieldset>

<fieldset>

<button class="button button1">Registration Form</button>

<button class="button button2">Display Form</button>

<button class="button button3">Exit</button>

</fieldset>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<style>

h1 {text-align: center;}

h1 {color: firebrick;}

.button {

border: none;

color: white;

padding: 10px 15px;

text-align: centre;

text-decoration: none;

display: inline-block;

font-size: 12px;

margin: 4px 2px;


transition-duration: 0.4s;

cursor: pointer;

.wrapper {

text-align: center;

display: inline-block;

position: absolute;

top: 60%;

left: 50%;

.button1 {

background-color: lightgrey;

color: black;

border: 2px solid grey;

.button1:hover {

background-color: grey;

color: white;

.button2 {

background-color: lightgrey;

color: black;

border: 2px solid grey;

.button2:hover {

background-color: grey;
color: white;

.button3 {

background-color: lightgrey;

color: black;

border: 2px solid grey;

.button3:hover {

background-color: grey;

color: white;

.button1 {width: 100px;}

.button2 {width: 100px;}

.button3 {width: 100px;}

label{

width: 100px;

display: inline-block;

text-align: left;

padding-right: 5px;

font-weight: bold;

</style>

</head>

<body>

<form action="/action_page.php">

<fieldset>
<h1>SSK3408 SYSTEM</h1>

</fieldset>

<fieldset>

<div class="studentid">

<label for="studentid">StudentID:</label>

<input type="text" id="studentid" name="studentid"><br><br>

</div>

<div class="name">

<label for="name">Name:</label>

<input type="text" id="name" name="name"><br><br>

</div>

<div class="gender">

<label for="gender">Gender:</label>

<input type="radio" id="male" name="gender" value="Male">

<label for="male">MALE</label>

<input type="radio" id="Female" name="gender" value="Female">

<label for="female">FEMALE</label><br><br>

</div>

<label for="skill">Skill:</label>

<input type="checkbox" id="skill1" name="skill1" value="C++">

<label for="skill1"> C++</label><br>

<div class="skill2">

<label for="skill"> </label>

<input type="checkbox" id="skill2" name="skill2" value="Java">

<label for="skill2"> Java</label><br>


</div>

<div class="skill3">

<label for="skill"> </label>

<input type="checkbox" id="skill3" name="skill3" value="Pyhton">

<label for="skill3"> Pyhton</label><br><br>

</div>

<label for="major">Major:</label>

<select id="major" name="major">

<option value="Software Engineering">Software Engineering</option>

<option value="Computer Newtwoork">Computer Network</option>

<option value="Multimedia">Multimedia</option>

<option value="Computer System">Computer System</option>

</select><br><br><br><br>

<div class="wrapper">

<button class="button button1">Reset</button>

<button class="button button2">Submit</button>

<button class="button button3">Back</button>

</div>

</fieldset>

</form>

</body>

</html>

You might also like