Lawrence  Lesch

Lawrence Lesch

1618391760

Vuetify — Radio Buttons and Switches

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Radio Buttons

We can add radio buttons with the v-radio component.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <p>{{ radios }}</p>
        <v-radio-group v-model="radios" :mandatory="false">
          <v-radio label="Radio 1" value="radio-1"></v-radio>
          <v-radio label="Radio 2" value="radio-2"></v-radio>
        </v-radio-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    radios: '',
  }),
};
</script>

Setting the mandatory prop to false makes it optional.

#programming #software-development #javascript

What is GEEK

Buddha Community

Vuetify — Radio Buttons and Switches

HTML Radio Button - Radio Group and Attributes

HTML Radio button is typically used to select a particular option from a group of related options. To define a radio button, we use the element of HTML. When a particular option is selected using a radio button, the other options are deselected i.e., one can only select a single option at a time. It lets the user select from a set of limited options.

HTML Radio Buttons

Syntax of HTML Radio Button:

Radio buttons belonging to a particular category must have the same name. The value of each radio button is not shown to the user but is sent to the server after its selection by the user. It is a good practice to use a

Defining Radio Group in HTML

We can define a group for radio buttons by giving each radio button the same name. As and when the user selects a particular option from this group, other options are deselected.

Following is an example of radio buttons with different names within a form.

<html>
<head>
  <title>Radio Buttons</title>
</head>
<body>
<form>
  <p>Please select your preferred contact method</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="Choice1">Email</label>
    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="Choice2">Phone</label>
    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="Choice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
</body>
</html>

Output-

HTML Radio Button

Attributes of HTML Radio Group

NameDescriptiontypeSpecifies the type of input, in this case set as ‘radio’.nameSpecifies the name of the control that is delivered to the server.valueSpecifies the value that will be sent to the server, if the radio button is checked.checkedDefines a by default checked radio button.

We should specify the value attribute so that the information is delivered to the server, on form submission. If the value attribute is not specified, the form data assigns a value ‘on’ to the entire radio group (this isn’t a good practice).

Selecting Radio Button by default

If no radio button is selected by the user, no information of the radio buttons is delivered to the server. Hence, it is recommended to use the ‘checked’ state of the radio button and eliminate inefficiency.

<html>
<head>
  <title>Radio Buttons</title>
</head>
<body>
<form>
  <p>Please select your preferred contact method</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email" checked>
    <label for="Choice1">Email</label>
    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="Choice2">Phone</label>
    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="Choice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
</body>
</html>

Output-

selecting default radio button

If ‘checked’ is put along with every button, the one put later overrides the ones put before it.

CSS and Radio Buttons

We can style radio buttons using CSS3.

<html>
<head>
  <title>Radio Buttons</title>
  <style>
    label {
  margin-right: 15px;
  line-height: 32px;
}
    input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}
  </style>
</head>
<body>
<form> 
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log">
</pre>
</body>
</html>

#html tutorials #html radio button #javascript and radio buttons

USAMA AKRAM

1623639954

How To Make Custom Radio Buttons With Cool Effect | Pure CSS | DesignTorch

https://youtu.be/GZh52Fh8o1o

#radio-buttons #css #html5 #custom-checkbox #html-css-radio-buttons #modern

Orlo  Gottlieb

Orlo Gottlieb

1617613140

All India Radio To Start A New Radio Series On Artificial Intelligence

All India Radio (AIR), in association with Vigyan Prasar, an autonomous organisation under the Department of Science and Technology and Tamil Nadu Science Forum (TNSF), announced the starting of a new radio science series on artificial intelligence (AI).

Produced by Madurai AIR, the new science series titled — ‘Ini yavum nunnarive’ (Future is Artificial intelligence) will be broadcasted on AIR every Saturday at 8 PM from March 6th, 2021.

With a focus on AI science and research in India and across the world, this series will talk about how artificial intelligence is used in literature, industrial and social sectors, as well as discuss the futuristic society and the apprehensions around it.

#news #ai on radio #air starting a new radio series on ai #all india radio #all india radio on artificial intelligence

Types, Effects and Attributes

HTML Button Tag – Types, Effects and Attributes

In this article, we are going to learn HTML Button Tags. So let’s start!!!

HTML Button

HTML Button

The

#html tutorials #html button #html button attributes #html button element #html button tags #html

Roslyn  Conn

Roslyn Conn

1596415620

Scanning Motorola SmartZone Systems With SDR and OP25

Remember the good old days when you could pickup any analog scanner from Radio Shack and be able to hear your local police and fire stations? If you live near any decently sized city then those days are long gone. Most large scale municipal radio systems have transitioned to a digital trunking technology that makes listening in more difficult than just tuning to a particular frequency.

With a trunked radio system, you have multiple different moving frequencies to account for if you want to successfully listen in. A trunked system uses a control channel which sends out a constant stream of commands to radios tuned to it so they know what frequencies to use. If the system is using digital voice encoding then you’ll also have to account for the particular voice codec as well.

When these systems first began making their debut, finding hardware scanners for them was pretty difficult. It usually takes time for hobbyist radio hardware (which is even affordable) to enter the market following a new technology.

#ham-radio #radio #amateur-radio #linux