This tutorial explains how to add radio buttons to an Android app and make decisions based on which option the user selects. Radio buttons allow the user to select one item from a list of items. This is what an app screen with radio buttons looks like:
Step 1
To get started, create a new Android app solution in Xamarin and then open the Main.axml file (in the Resources > layout folder). Drag a Text (Medium) element and three RadioButton elements from the Toolbox on to the app screen. Change the Text values on each element from the Properties panel and make sure each radio button has a name (eg. radioButton1, radioButton2, radioButton3) after @+id/ in the Id field on the Properties panel.
Step 2
Add a Space element and another Text (Medium) element to your screen. Resize the Space element to make some space between the radio buttons and the Text (Medium) element. Give the Text (Medium) element a name eg @+id/resultTextView.
Step 3
Open the MainActivity.cs file and define the three radio buttons and the text view. Then add them to the OnCreate method, so they can be accessed by the code.
Step 4
Now add a click event for each radio button so that the app displays a message saying which option was selected.
Save your code and test the app. The example shown below is what you should see. However, the problem is that once you select an option it can’t be de-selected. Also, when using radio buttons you should only be able to select one option at a time but at the moment you can have more than one option selected at a time. We will fix this in the next section.
Step 5
Go back to the screen design and delete all three radio buttons. Replace these radio buttons with a RadioGroup from the toolbox. This RadioGroup element has the name @+id/radioGroup1 . You will notice that the RadioGroup provides you already with three radio buttons grouped together. A RadioGroup can have any amount of radio buttons in it, but only one can be selected at a time.
If you go to the Source view you can see that you can add more RadioButton elements to belong to the RadioGroup as long as you add them inside the RadioGroup tags.
Change the Textvalue on each RadioButton so they are different.
Step 6
Save the Main.axml file and go back to the MainActivity.cs file. The code needs to be changed so now it can access the RadioGroup element. A CheckChanged event is also added to detect when an option has been checked by the user. When this event fires, the option they selected is store in the optionvariable and the result is displayed to the user.
Now if you test your app, it should look like what you see below. You could now add if statements to check which radio button was selected and have another event occur.
In this tutorial we will make a Cookie Clicker game for iOS mobile devices using Xamarin.We made the same app for Android in a previous tutorial and now we are going to make it for iOS devices. You will also learn how to use images for buttons instead of plain text.
This is what the basic working app will look like but you can improve the look of it by change the text and background colours and by adding more options.
iOS Cookie Clicker app
Watch the video below or scroll down for the full instructions and sample code.
Video
Step 1
Start a new Solution (File > New > Solution). Select App under iOS and then select Single View App. Click on Next.
Step 2
Give your app a name, select the minimum iOS version you want to support and click Next.
Step 3
Give your project and solution a name (you can keep it as the default) and then choose the location where you will store your project (eg. the Projects folder). Then click on Create.
Step 4
Open the Main.storyboard file (in the Resources directory). Change the view from Generic to the iPhone model you are targeting (eg. iPhone 6S).
Step 5
Drag a Button element on to the screen from the Toolbox.
Step 6
You will need a cookie image for your app. Once you have an image on your computer, select the Resources folder. Click the cog icon, then Add > Add Files from Folder.
Step 7
Find the folder that contains your cookie image. Then click on Open.
Step 8
Click the checkbox next to the image you want to use and then click OK.
Step 9
Choose Copy the file to the directory and then click OK.
You should now see the image in the Resources directory.
Step 10
Now select the Button you added earlier and from the Widget tab on the Properties panel, scroll down until you see the Background property. Click the dropdown box and choose the image you want to use (eg. cookie.png). Alternatively, type in the filename in the text box.
Now you have a cookie image as the background for your button. However, the button is very small so it will need resizing.
Step 11
Click and drag the corners of the button to enlarge it so that the background image of the cookie is nice and clear.
Step 12
Now go and remove the Default title value under Title on the Properties panel so that the button text is no longer visible on the button.
Step 13
Add a Label element to the screen under your cookie button and change its Text value to say ‘0 clicks’.
Step 14
Change the Name of the Button element to cookieButton.
Step 15
Change the Name of the Label element to clicksLabel.
Step 16
Now all that remains is adding the code that will count and display the number of clicks. Open the ViewController.cs file to begin coding.
Step 17
Firstly, create a variable called clicks that will contain an integer value. Its initial value should be 0 before any clicks have been recorded. Inside the public partial class ViewController : UIViewController section, add the following line of code:
int clicks = 0;
Step 18
Now you need to add a button touch event so that every time the cookie button is touched, the clicks variable’s value will increase by 1. To do this, go to the ViewDidLoad method and make some new space under the base.ViewDidLoad() line. Start typing cookieButton.TouchUpInside+= and then press the Spacebar. As you do this, you will see a list of options. Double click the CookieButton_TouchUpInside option to create a new method.
After creating the new CookieButton_TouchUpInside method, you can now add code inside the method that will run when the cookie button is touched by the user. This code should increase the clicks variable by 1 and display the number of clicks every time the button is touched.
Step 19
Add the following code inside the CookieButton_TouchUpInside method:
This code will increase the clicks variable by 1 every time the button is tapped as well as displaying the value of the variable and concatenating (joining) the value to the text ‘ clicks!’ – for example 20 clicks! Note that the clicks variable’s value has to be converted to a string before it can be displayed on the button.
Now you can test the app!
When you test the app, click or touch the cookie button and you should see the number of clicks displayed increased, as shown below.
iOS Cookie Clicker app
Try extending the app by adding some buttons with the options to ‘buy’ items or unlock items after a certain number of clicks. You could also use a timer to increase the number of clicks automatically over a period of time (eg. 5 clicks every second). You might also like to change the colour of the text and the background of the app.
Sample C# code
Here is the sample C# code for the ViewController.cs file (please note that the namespace should match the project/solution/app name of your app. It is called CookieClickerIOS in this example.
using System;
using UIKit;
namespace CookieClickerIOS
{
public partial class ViewController : UIViewController
{
int clicks = 0;
public ViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
cookieButton.TouchUpInside+= CookieButton_TouchUpInside;
}
void CookieButton_TouchUpInside (object sender, EventArgs e)
{
clicks++;
clicksLabel.Text = clicks.ToString () + " clicks!";
}
public override void DidReceiveMemoryWarning ()
{
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
}
}
For our second Android app project, we will create the most pointless but addictive game in the world…a cookie clicker! A basic version of it will look like the image shown below, but you can extend this game as much as you like. You will also learn how to add image buttons to your app screens.
Watch the video below or scroll down to read the step-by-step instructions and view the sample code.
Video
Step 1
You will need to create a new Android App solution in Xamarin called CookieClicker. Click on New Solution (or File > New Solution) to get started.
Step 2
Choose Android App as the type of new solution and then click Next.
Step 3
Set the App Name to CookieClicker (one word – no spaced). Choose Modern Development as the Targeted Platform using the default theme and click on Next.
Step 4
Keep the project and solution names as CookieClicker, select a project location to store your files in and click on Create.
Step 5
Open the MainActivity.cs file (if it does not automatically open) and delete the lines of code highlighted below. These lines of code won’t be needed for this project.
Click to see larger version of this image.
Step 6
Now open the Main.axml file located in the Resources > layout folder.
Step 7
Click on the button that says “Hello World, Click Me!”. We won’t need this button so it can be deleted. Either click on it and press the Delete key on your keyboard, or right-click the button and select Delete.
Step 8
From the Toolbox (if you don’t see it, you can search for the Toolbox from the search bar), scroll down under Images & Media and drag an ImageButton element on to the phone screen.
Step 9
Now you will need to download a cookie image to your computer (preferably a PNG image file with a transparent background). A free public-domain image has been provided below. Click on the image to open the full-size version and then save the image to a folder on your computer and name it cookie.png.
Click to open the full-size image. Image from: https://pixabay.com/en/chocolate-chip-cookies-dessert-304801/ (CC0 Public Domain – free for commercial use, no attribution required)
Step 10
Select the ‘drawable’ folder inside the Resources folder and click on the small cog icon. Then select Add > Add Files from Folder.
Step 11
Select the folder that contains the cookie image file and click on Open.
Step 12
Select the cookie.png file (or whatever yours is called) and make sure the checkbox is checked. Then click on OK.
Step 13
Make sure you select Copy the file to the directory and then click on OK.
Step 14
Now you should see cookie.png in the drawable folder.
Step 15
Click on the ImageButton element on the phone screen and change the Src property to @drawable/cookie (you do not need to include the .png file extension).
Step 16
Now we need to make sure the image fits properly on the screen. Click on the drop-down arrow next to the Scale Type property and change it to fitCenter.
You can then also click on the ImageButton and drag the little circle up to change the height of the image. You can also change the width of the image this way. Alternatively, go to the Layout tab on the Properties panel and change the width and height values there eg. 435dp for the height. Note: sizes of elements are measured using the ‘dp’ unit on Android.
If you go to the Source tab, your code for the Main.axml file might look like the code shown below. However, your code could be a little different so don’t change the code here unless you are sure you know what you are doing.
Step 17
In the Designer view, drag a Text (Large) element on to the phone screen under the ImageButton. This will be used to display the number of clicks.
Step 18
From the Widget tab on the Properties panel, change the Text value from Large Text to 0 clicks. At the same time, change its Id from @+id/textView1 to @+id/cookieTextView . You can also change the Gravity value to center so the text is centered.
Step 19
Click on the ImageButton element (the cookie) and change its Id from @+id/imageButton1 to @+id/cookieImageButton – now you need to save the Main.axml file.
Step 20
Now we can add the code! Open the MainActivity.cs file and create an integer variables called clicks that is given an initial integer value of 0. This variable will be created inside the MainActivity class, as highlighted below.
Step 21
We also need to define the ImageButton element and the TextView element in the code. This is highlighted in the lines below. Make sure to use the correct names for each element.
Step 22
Inside the OnCreate method (under the SetContentView (Resource.Layout.Main); line), we need to now setup the ImageButton and TextView element.
Step 23
The next thing you need to do is create a click event for the cookie ImageButton by adding the line cookieImageButton.Click+= CookieImageButton_Click; – this will create a new method called CookieImageButton_Click which will contain the code that will increase the number of clicks and display the number of clicks each time the ImageButton is tapped.
Step 24
Inside the CookieImageButton_Click method, add the following two highlighted lines of code. The clicks++; line will increase the clicks variable by 1 each time the button is tapped, and the next line of code is responsible for converting the clicks variable value to a string and displaying the clicks variable’s value on the screen as well as the text “clicks!” at the end eg. 25 clicks!
Now save your work. All of the coding is done! Now you could extend this app by adding extra buttons to purchase items when a certain number of cookies are clicked (using if statements) or increase the number of cookies by a different amount. You could add extra text labels or buttons too. However, let’s test that this app works properly first. Click on the Build button after selecting a virtual device to run the app on (if you don’t know how to do this, refer to the previous tutorial – Creating your first Android app with Xamarin).
Here is the source code for the MainActivity.cs file:
using Android.App;
using Android.Widget;
using Android.OS;
namespace CookieClicker
{
[Activity (Label = "CookieClicker", MainLauncher = true, Icon = "@midmap-hdpi/icon")]
public class MainActivity : Activity
{
int clicks = 0;
ImageButton cookieImageButton;
TextView cookieTextView;
protected override void OnCreate (Bundle savedInstanceState)
{
base.OnCreate (savedInstanceState);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
cookieImageButton = FindViewById<ImageButton> (CookieClicker.Resource.Id.cookieImageButton);
cookieTextView = FindViewById<TextView> (CookieClicker.Resource.Id.cookieTextView);
cookieImageButton.Click+= CookieImageButton_Click;
}
void CookieImageButton_Click (object sender, System.EventArgs e)
{
clicks++;
cookieTextView.Text = clicks.ToString () + " clicks!";
}
}
}
This tutorial explains how to use radio buttons in forms and check set values in PHP to ensure that the user has entered data in the form. Watch the video below and then scroll down to see the sample code.
Sample PHP code:
Step 1: Create a PHP file (eg. form.php) which contains a form with radio buttons by copying the following code. This example will quiz the user on the capital city of Australia.
<html>
<head>
<title>Form that checks set values</title>
</head>
<body>
<form action="action_handler.php" method="POST">
<p>What is the capital city of Australia?</p>
<input type="radio" name="capital" value="Sydney"> Sydney<br>
<input type="radio" name="capital" value="Canberra"> Canberra<br>
<input type="radio" name="capital" value="Melbourne"> Melbourne
<p><input type="submit"></p>
</form>
</body>
</html>
Step 2: Create a separate PHP file called action_handler.php and copy the following code into it. This file will handle the form data.
<?php
if(isset($_POST['capital'])){
$capital = $_POST['capital'];
}
else{
$capital = NULL;
}
if($capital != NULL){
if($capital != "Canberra"){
echo "$capital is incorrect";
}
else{
echo "$capital is correct";
}
}
else{
echo "You must select an answer";
}
?>
In this tutorial you will learn how to add buttons to improve your navigation menu using CSS. The menu buttons will change colour when the mouse hovers over them or when a page has been visited.
This tutorial also provides you with a CSS layout template that you can use to add a header, content area, and footer in addition to the navigation menu. You can read through the page to see how each section of the code works or jump down the page to see the entire HTML and CSS code.
This is what the web page layout looks like (click the image to see the live site):
CSS layout with menu buttons – click the image to view the live web page
This is what the menu hover effect looks like when the user’s mouse hovers over a button:
Step 1 – Adding the menu links to the HTML code
The first step to creating the navigation is to add the links to the other web pages on your site in the HTML code of the web page. The menu will be inside a div with an ID of “nav”. The links on the menu will then be inside an unordered list – each link will ne an individual list item. Here is what the HTML code looks like for the nav div:
From here you need to add the CSS code that will style this menu. The nav div will be the first part that we will add CSS code for. The CSS code for the nav div below includes a dark blue/purple background colour, a height of 300 pixels and width of 150 pixels (this could be changed to a % value too). It is also set to float: left so that the menu is on the left side but this could be left out if you want a horizontal menu. Lastly, 5 pixels of padding is added.
Step 3 – Adding the CSS code for the unordered list
Then we add the style information for the list <ul> element. The list-style-type is set to none so that there are no bullets (dot points) on the list. The width of the unordered list is set to 100% so it takes up all of the width of the div, and the background colour is set to a dark blue/purple colour here. You could add margin and padding if you want or leave them as 0.
Step 4 – Adding the CSS code for links inside each list item.
Here we add a style that will apply to any link that is a list item on a list. Remember, the <li> tag is used to create list items and the <a> tag is used for links. For this style, we change the font to Calibri, size 14 with a font-style of none. Display is set to block (change to inline if you want a horizontal menu), the colour of the text is white, some padding is added, and text-decoration is set to none so that the links are not underlined.
li a {
font-family:Calibri;
font-size: 14pt;
font-style:none;
display: block;
color: #FFFFFF;
padding: 8px 0 8px 16px;
text-decoration: none;
}
Step 5 – Add the CSS code for visited links
By adding the “li a:visited” CSS code, we are applying a style to only links on a list that link to a page that has been visited by the user.
li a:visited {
background-color: #4CAF50;
color: #FFFFFF;
}
Step 6 – Adding the CSS code for hover links
We can apply a style to links when the mouse hovers over a link (button). On this menu, we have applied a style that will change the background colour of a button to a light purple colour and the font colour to black whenever the mouse hovers over a button.
li a:hover {
background-color: #786ED4;
color: #000000;
}
And that’s it! You can change the code to suit your theme and try making a horizontal menu instead of a vertical menu. If you want the entire HTML code and CSS code you can copy it below.
The entire HTML file code:
<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Layout</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>
<div id="header">
<h1>My website</h1>
</div>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
<div id="section">
<h2>Welcome to my website</h2>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
<div id="footer">
Copyright....2015.
</div>
</body>
</html>
Note that for the header section a background image is specified. If you do not have a background.png file in the same directory as the CSS code, then the image will not appear but the dark blue/purple background colour will show instead. Click here if you’d like to download a blue/purple gradient background image to use as your header background.
A Graphical User Interface (GUI) provides a way for the game to provide information to the user or to read information from the user. This can be in the form of labels, buttons, text boxes, sliders, menus, and so on. The GUI can sit on top of the actual game. It is always a good idea to design your GUI before making the game – draw up a storyboard or wireframe with the types of GUI controls you want in the game and where you want to place them.
GUIs are created using code and can be added to any object or script in your game. If you have different parts of the GUI on different objects or scripts, it can become confusing and hard to maintain. It is a good idea to have all the GUI parts in one spot on one object.
In order to add a GUI to your scene, you need to add a special method to the script you have created for your GUI which is attached to an object in your scene eg. the camera. The special method that is used to create a GUI is called OnGUI(). This method takes no parameters and returns no data to whatever called it. The method will draw your GUI components on the screen and is called every single frame, just like the Update() method. Different GUI controls (eg. labels, buttons) will have code that goes inside the OnGUI() method.
Labels
Let’s start making a basic GUI that will draw a label with a short message on the screen. Labels display text on the screen that can be a simple string value, a variable value or a concatenated (joined) string and variable value eg. “Score: ” + scoreVariable.
A label displaying the score.
Watch the video on Labels below or scroll down to read the instructions and sample code.
Create a new scene in your project and a new script called myGUI. Attach this script to the Main Camera. Add the following code to your script inside the class but outside of all other methods (i.e. do not place it inside the Start() or Update() methods).
void OnGUI(){
GUI.Label (new Rect(0,0,80,20), "Hello");
}
Run the scene and you should see ‘Hello’ displayed on the screen in the top left corner. You have just created a basic GUI with a label that draws in the top left corner of your screen (at position 0 on x axis and position 0 on y axis of screen). The label has a width of 80 and a height of 20. The parameters inside Rect() are x position, y position, width, height. The label can display a string value or variable (or concatenated strings/variables).
Boxes
The box is similar to a label except that a box has a dark border around the label. An example of a box is shown below.
An example of a box.
Watch the video on Boxes below or scroll down to read the instructions and sample code.
The syntax for creating a box is also similar to creating a label. new Rect() takes the parameters of x position, y position, width, and height). An example of a box containing a “Hello” string message is shown below. This code would be placed inside the OnGUI() method:
GUI.Box(new Rect(0,0,80,20), "Hello");
GUI.Box(new Rect(0,0,80,20), "Hello");
If you want a box at the middle-top area of the screen, you can use code like this. This code would be placed inside the OnGUI() method:
Buttons can be in one of two states. A button can be either pressed down or not pressed down. An if statement can be used to determine whether a button is being pressed (a boolean value of true or false). If you keep the button pressed down with the mouse, it will not behave differently to just clicking once. The image below shows an example of a button.
An example of a button that reloads/resets the current level in a game.
Watch the video on Buttons below or scroll down to read the instructions and sample code.
Like labels and boxes, buttons require an x position, y position, a width and a height value. The sample code below shows how to create a button at an x position of 3, a y position of 3, with a width of 80 and height of 20. When the button is clicked it will reload the level (scene) using Application.LoadLevel. In this example the scene is called ‘myScene’. This code would be placed inside the OnGUI() method:
if(GUI.Button(new Rect (3, 3, 80, 20), "Reset")){
Application.LoadLevel("myScene");}
if (GUI.Button (new Rect (3, 3, 80, 20), "Reset")) {
Application.LoadLevel ("myScene");
}
Repeat button
A repeat button is like a normal button except that it can be pressed and held down with the mouse click. It can be used to increase the value of a variable while the button is being held down.
The example below increases a variable’s value while the button is being held down. This code would be placed inside the OnGUI() method:
if (GUI.RepeatButton (new Rect (0, 0, 80, 20), "Increase")) {
myVariable += 1;
print (myVariable);
}
Toggle
A toggle button (also known as a ‘stated’ button because it can be in different states) is like a switch – it can be on or off. It can be used to set something in one state or another. It takes a boolean parameter (whether the button is clicked or not) and returns a boolean value (tells the user if the button is clicked).
The two images below show a toggle in two different states (off and on).
An example of the code is shown below with a boolean variable called ‘mySwitch’.
A toolbar is a row of several buttons. You can have however many buttons you like on a toolbar, but only one button can be selected at any one time. An integer variable is used to keep track of which button is selected and an array of strings is used for the different buttons.
The number of items in the array determines how many buttons there are. For example, if there are three items in the array then there will be three buttons. If the first button is selected, the integer value will be 0. If the second button is selected, the integer value will be 1. If the third button is selected, the integer value will be 2, and so on.
The sample code below shows the integer value variable, the array of strings, and the Toolbar GUI control.
int difficulty =0;string[] list ={"Easy", "Medium", "Hard"};void OnGUI(){
difficulty = GUI.Toolbar(new Rect (0,0,200,30), difficulty, list);}
int difficulty = 0;
string[] list = {"Easy", "Medium", "Hard"};
void OnGUI(){
difficulty = GUI.Toolbar(new Rect (0,0,200,30), difficulty, list);
}
Textfield
A textfield allows the user to input text. The textfield can display text and also accepts text from the user as they click in the box and type in it. A string variable can be used to store text that is displayed inside the textfield, and then store the text that the user types in.
The code below shows how a textfield can be added to a scene.
string textInput ="Enter your text here";void OnGUI(){
textInput = GUI.TextField(new Rect(600,20,130,30), textInput);}
string textInput = "Enter your text here";
void OnGUI(){
textInput = GUI.TextField(new Rect(600,20,130,30), textInput);
}
Textarea
A textarea is just like a textfield except that it can store multiple lines of text.
The sample code below shows how to add a textarea control to your scene.
string textInput ="Enter your text here";void OnGUI(){
textInput = GUI.TextArea(new Rect(600,20,130,120), textInput);}
string textInput = "Enter your text here";
void OnGUI(){
textInput = GUI.TextArea(new Rect(600,20,130,120), textInput);
}
Sliders
Sliders allow the user to select a value between a range of different values by clicking and dragging a slider with the mouse. You can add horizontal and vertical sliders to your scenes in Unity. The slider takes a float value that is used for the default position of the slider, and returns a float value that contains the value the user changed the slider to. It also takes a minimum and maximum slider value.
The sample code below shows how to add both horizontal and vertical sliders to a scene. In the two examples, there are float variables that are initially set to a value of 0 (inside the main class). Each slider takes a float value and then returns a float value. The x and y positions as well as the width and heigh are specified. Parameters for minimum and maximum values for the sliders are also added at the end of the statement – in this example, the minimum value is 0 and the maximum value is 100.
Forms allow users to submit data in many different ways. A range of form input elements are available including text boxes, checkboxes, radio buttons, and submit buttons. This video tutorial explains how to use radio buttons in a form and also how to use JavaScript to handle the form and validate the data which the user has provided.
Form validation checks whether an option has been selected before the form is submitted. If no option has been selected, then an alert message will tell the user to select an option and the form will not submit the data until an option has been selected.
Watch the video below and then scroll down to see the sample code.
Here is the sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>JavaScript - Radio buttons and form validation</title>
<script type="text/javascript">// This file will use form validation for forms with radio buttons// Using 'name' in the radio buttons, puts these two radio button options in the same group (the same question)// Value is the text displayed next to the radio button that has been selected// ID identifies this element which can be used by Javascript code// The isChecked function checks to see if an option has been selected before continuing// .checked is a property of a radio button (that the radio button has been checked)function isChecked(){var checkedYes = document.getElementById('like').checked;var checkedNo = document.getElementById('dislike').checked;if(checkedYes ==false&& checkedNo ==false){
alert('You need to select an option!');returnfalse;}else{returntrue;}}</script>
</head>
<body>
<form action="submission.html" method="get" onsubmit="return isChecked();">
<p>Do you like coding?</p>
Yes<input type="radio" name="coding" value ="Yes" id="like"/><br/>
No<input type="radio" name="coding" value ="No" id="dislike"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>JavaScript - Radio buttons and form validation</title>
<script type="text/javascript">
// This file will use form validation for forms with radio buttons
// Using 'name' in the radio buttons, puts these two radio button options in the same group (the same question)
// Value is the text displayed next to the radio button that has been selected
// ID identifies this element which can be used by Javascript code
// The isChecked function checks to see if an option has been selected before continuing
// .checked is a property of a radio button (that the radio button has been checked)
function isChecked(){
var checkedYes = document.getElementById('like').checked;
var checkedNo = document.getElementById('dislike').checked;
if(checkedYes == false && checkedNo == false){
alert('You need to select an option!');
return false;
}
else{
return true;
}
}
</script>
</head>
<body>
<form action="submission.html" method="get" onsubmit="return isChecked();">
<p>Do you like coding?</p>
Yes<input type="radio" name="coding" value ="Yes" id="like"/><br/>
No<input type="radio" name="coding" value ="No" id="dislike"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This video tutorial explains how to use buttons use buttons and events such as clicking on a button or moving the mouse over or away from a button. Click here to watch the video on YouTube or view it below.
This sample code snippet shows how to work with events (eg. onclick and onmouseover). It also shows how to use those annoying alert messages…but please, only use them for good! You will also be introduced to HTML form elements such as buttons, mentioned in the video above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>JavaScript - Events</title>
<script type="text/javascript">// alert("Welcome to my web page"); would bring up an alert whenever the page loads// However, we will use a click event to load an alert message instead, and this will be in the body section of the html page</script>
</head>
<body>
<form>
<input type="button" value="click me" onclick="alert('You clicked me');"/>
<input type="button" value="hover me" onmouseover="alert('You hovered over me');"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>JavaScript - Events</title>
<script type="text/javascript">
// alert("Welcome to my web page"); would bring up an alert whenever the page loads
// However, we will use a click event to load an alert message instead, and this will be in the body section of the html page
</script>
</head>
<body>
<form>
<input type="button" value="click me" onclick="alert('You clicked me');"/>
<input type="button" value="hover me" onmouseover="alert('You hovered over me');"/>
</form>
</body>
</html>
JavaScript can also use an event listener to ‘listen’ for other events such as the page loading, a user scrolling down the page or the user pressing a keyboard or mouse button.
