Why can't I select my radio buttons? - html

Why do my radio buttons not work? I must press to the left of the button to select it. Why?
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery Validation Error Placement for Semantic-UI</title>
<link href="/static/css/generic_in.css?newsvgindia.393932601812558191" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded"
action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<!--
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
</div>
</div>
</div>
-->
<div class="ui text container">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgIYJDA" name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column required field">
<label>Type</label>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad" name="company_ad" value="0">
<label>Private</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad2" name="company_ad" value="1">
<label>Company</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Email</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Email">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<label>Phone</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="example-id" type="checkbox" checked>
<label for="example-id">Display my phone number on site</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Category</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" name="category_group" id="category_group" sel_id="">
<option value="0" selected="selected">«All categories
»
</option>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Type</label>
</div>
<div class="twelve wide column">
<div id="type_container" class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>For sale</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>Wanted</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Title</label>
</div>
<div class="twelve wide column">
<input type="text" name="title" placeholder="Last Name">
</div>
<div class="four wide column required field">
<label><label for="text">Ad text</label></label>
</div>
<div class="twelve wide column">
<textarea cols="45" id="text" name="text" placeholder="Please describe the product or service in a few simple sentences" rows="10"></textarea>
</div>
<div class="four wide column ">
<label> Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox" checked>
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span></div>
<button name="validate" type="submit" class="btn btn-success btn-lg"
onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
v>
</body>
</html>


Your radio buttons do not work as you have hidden the radios to use a label as a styled radio button. In order for these to work, you need to associate the label with the radio it is for by doing the following:
<label for="id_of_radio">text</label>
so in the example of the private radio button, you would change your label to be:
<label for="c_ad">Private</label>
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery Validation Error Placement for Semantic-UI</title>
<link href="/static/css/generic_in.css?newsvgindia.393932601812558191" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded" action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<!--
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
</div>
</div>
</div>
-->
<div class="ui text container">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;" href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be published for a period of 60 days. Thanks for using our site!
</div>
</div>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgIYJDA" name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column required field">
<label>Type</label>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad" name="company_ad" value="0">
<label for="c_ad">Private</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad2" name="company_ad" value="1">
<label for="c_ad2">Company</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Email</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Email">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<label>Phone</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="example-id" type="checkbox" checked>
<label for="example-id">Display my phone number on site</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region">
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Category</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" name="category_group" id="category_group" sel_id="">
<option value="0" selected="selected">«All categories »
</option>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Type</label>
</div>
<div class="twelve wide column">
<div id="type_container" class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>For sale</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>Wanted</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Title</label>
</div>
<div class="twelve wide column">
<input type="text" name="title" placeholder="Last Name">
</div>
<div class="four wide column required field">
<label>
<label for="text">Ad text</label>
</label>
</div>
<div class="twelve wide column">
<textarea cols="45" id="text" name="text" placeholder="Please describe the product or service in a few simple sentences" rows="10"></textarea>
</div>
<div class="four wide column ">
<label>Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox" checked>
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span>
</div>
<button name="validate" type="submit" class="btn btn-success btn-lg" onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
v>
</body>
</html>
If you do this with all your labels (associate them to their corresponding inputs) it will mean when you click on the label, it will focus on the input


Your markup for the radio buttons seems off. You should try this:
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
More examples here: http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp


You are hiding the radio buttons and representing them with your own css.
This is why the radio button gets selected only when you click on the hidden <input type="radio">. (try unchecking opacity for the <input type="radio"> in dev tools and test)
You might have your reasons for doing this but it is not good practice. Also <input type="radio"> tags need to be inside <label> for it to be selected even if you click on the text.
However, in your case it looks as though moving the input radio tag inside is breaking your styling.
The alternative, if you have control over the id attribute, is to give for attribute for the labels corresponding to the respective input tags,
<input type="radio" id="c_ad" name="company_ad" value="0" dcvalue="0">
<label for="c_ad">Private</label>
<input type="radio" id="c_ad2" name="company_ad" value="1" dcvalue="1">
<label for="c_ad2">Company</label>

Related

Bootstrap multiple inputs two lines

How can I create a multiple input with checkbox on the left and two lines each one with an .
Here´s the code that I´m using:
<div class="container-fluid">
<div class="col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" id="idays">
</div>
<input type="text" class="form-control" id="days1" disabled="" maxlength="10">
<input type="text" class="form-control" id="days2" disabled="" maxlength="10">
</div>
</div>
</div>
And I want something similar to this:
two inputs

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-1 d-flex align-items-center justify-content-center">
<input type="checkbox">
</div>
<div class="col-11 pl-0">
<div class"row">
<div class="col-12">Option 1</div>
<div class="col-12">Option 2</div>
</div>
</div>
</div>
</div>

Form not working on including Semantics UI CDNs

I am trying to create a form where I am using fomantic UI but it's not working, the calendar and dropdowns are not responding on click, I've downloaded the semantic UI zip file and included them in my form page but it is not responding, what am I missing here, will deeply appreciate your help on this.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="../resources/assets/Semantic-UI-CSS-master/semantic.css">
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>
<div class="ui blue inverted borderless menu">
<a class="active item">
Home
</a>
<div class="right menu">
<a class="item">
Login
</a>
<a class="item">
Sign Up
</a>
<a class="item">
Sign Out
</a>
</div>
</div>
<div class="container centered" id="datacontainer">
<form class="ui form" id="dataform">
<div class="ui card">
<div class="image" id="image-1">
<img src="C:\Users\ABC\Pictures\picture-1.jpg">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>First Name</label> </span>
<input class="forminclass" type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Last Name</label> </span>
<input class="forminclass" type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Email</label></span>
<input class="forminclass" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Phone</label></span>
<input class="forminclass" type="text" name="phone" placeholder="Phone">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Gender</label> </span>
<div class="ui selection dropdown">
<input class="forminclass" type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Date of Birth</label> </span>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="dob"type="text">
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Text</label> </span>
<textarea id="areat" rows="2"></textarea>
</div>
</div>
<button class="ui green button" id="edit" type="submit">Edit</button>
<button class="ui flex primary button" id="save" type="submit">Save</button>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
<script type="text/javascript" src="../resources/assets/Semantic-UI-CSS-master/semantic.min.js"></script>
</body>
</html>
Here's my HTML.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="../resources/assets/Semantic-UI-CSS-master/semantic.css">
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>
<div class="ui blue inverted borderless menu">
<a class="active item">
Home
</a>
<div class="right menu">
<a class="item">
Login
</a>
<a class="item">
Sign Up
</a>
<a class="item">
Sign Out
</a>
</div>
</div>
<div class="container centered" id="datacontainer">
<form class="ui form" id="dataform">
<div class="ui card">
<div class="image" id="image-1">
<img src="C:\Users\ABC\Pictures\picture-1.jpg">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>First Name</label> </span>
<input class="forminclass" type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Last Name</label> </span>
<input class="forminclass" type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Email</label></span>
<input class="forminclass" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Phone</label></span>
<input class="forminclass" type="text" name="phone" placeholder="Phone">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Gender</label> </span>
<div class="ui selection dropdown">
<input class="forminclass" type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Date of Birth</label> </span>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="dob"type="text">
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Text</label> </span>
<textarea id="areat" rows="2"></textarea>
</div>
</div>
<button class="ui green button" id="edit" type="submit">Edit</button>
<button class="ui flex primary button" id="save" type="submit">Save</button>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
<script type="text/javascript" src="../resources/assets/Semantic-UI-CSS-master/semantic.min.js"></script>
</body>
</html>

Hope this will help. Placement of CSS and js files were incorrect.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>
<div class="ui blue inverted borderless menu">
<a class="active item">
Home
</a>
<div class="right menu">
<a class="item">
Login
</a>
<a class="item">
Sign Up
</a>
<a class="item">
Sign Out
</a>
</div>
</div>
<div class="container centered" id="datacontainer">
<form class="ui form" id="dataform">
<div class="ui card">
<div class="image" id="image-1">
<img src="C:\Users\ABC\Pictures\picture-1.jpg">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>First Name</label> </span>
<input class="forminclass" type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Last Name</label> </span>
<input class="forminclass" type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Email</label></span>
<input class="forminclass" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Phone</label></span>
<input class="forminclass" type="text" name="phone" placeholder="Phone">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Gender</label> </span>
<div class="ui selection dropdown">
<input class="forminclass" type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Date of Birth</label> </span>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="dob"type="text">
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Text</label> </span>
<textarea id="areat" rows="2"></textarea>
</div>
</div>
<button class="ui green button" id="edit" type="submit">Edit</button>
<button class="ui flex primary button" id="save" type="submit">Save</button>
</form>
</div>
</body>
</html>

How can I make the fields aligned?

How can I align the input fields Title and Text so that they are on the same row as the labels? I need the extra div because I'm making a form that need dynamic fields. My problem is that the input boxes appear on the next row no matter what I do.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">
</div>
</div> <div class="row">
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>

Use display: inline-block; on your div
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row">
<div class="two wide column inline">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field inline">
<input type="text" name="title" placeholder="Title">
</div>
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
I used a class inline to show you on your first text input

added a class textrow to the 2 rows containing the input type="text"
and use display:inline-block on them
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.textrow {
display:inline-block;
}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row textrow">
<div class="two wide column">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">
</div>
</div>
<div class="row textrow">
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>

Float:left could align them in same row, you could do that either on class .row or assign other class into it and assign float:left;
<div class="row">
........
</div>
Css
.row{
float:left;
padding-right:5px;
}
(or)
<div class="row txt">
........
</div>
Css
.txt{
float:left;
padding-right:5px;
}

How to align my label and input field

I want my input field "title" to render directly below the radio buttons, but now it is too far to the left. I need the extra div because it is a dynamic form, but I want the grid view. How can I accomplish that?
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>
<title></title>
</head>
<body>
<form accept-charset="UTF-8" action=
"http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA"
class="ui form formular" enctype="multipart/form-data" id="formular"
method="post" name="formular">
<span class="ui two column grid"></span>
<div class="row">
<span class="ui two column grid"></span>
<div class="two wide column">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Category</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field">
<span class="ui two column grid"></span>
<div class="inline field" id="type_container">
<span class="ui two column grid"><input name="type" type=
"radio" value="s"> <label>A</label> <input name="type"
style="margin-left: 25px;" type="radio" value="k">
<label>B</label></span>
</div><span class="ui two column grid"></span>
</div>
</div>
<div class="maintext" id="category_contents" style="display: block;">
<span class="ui two column grid"></span>
<div class="row">
<span class="ui two column grid"></span>
<div class="two wide column inline">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Title</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field inline">
<span class="ui two column grid"><input name="title"
placeholder="Title" type="text"></span>
</div><span class="ui two column grid"></span>
<div class="two wide column">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Text</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field">
<span class="ui two column grid"><input name="data"
placeholder="Test" type="text"></span>
</div><span class="ui two column grid"></span>
</div>
</div>
</form>
</body>
</html>
I want to increase the space between the Title label and the Title input field. How can I do it?

I had checked your HTML form it has some unwanted columns. Now I have updated the form and I created two demos and I used form elements and grid layout for two columns form.
Semantic-UI Basic Form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="example">
<h4 class="ui header">Semantic UI Form</h4>
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<label>Categories</label>
</div>
<div class="field">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>A</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>B</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>C</label>
</div>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Semantic-UI Two Column Form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui text container">
<h4 class="ui header">Semantic UI Form</h4>
<form class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="field">
<label>Categories</label>
</div>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>A</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>B</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>C</label>
</div>
</div>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>

Try this with your label
<label style="padding-right:50px">Title</label>
Also you can use table in your design to make your page design more efficient.

I recommend using Bootstrap - it will take you no more than 30 mins to understand and will make your website page/website layout so easy see - http://getbootstrap.com/
Also, means you website will be mobile and tablet friendly.
just add the files to your website -http://getbootstrap.com/getting-started/ (under first heading Bootstrap CDN).
then paste in the relevant form layout you would like (you can tweak these) - http://getbootstrap.com/css/#forms (under css heading)
see the grid layout system - http://getbootstrap.com/css/#grid
See all the things you can do just pasting in the bootstrap code: buttons, icons, etc (all listed under components - http://getbootstrap.com/components/

Re my answer - have made your view using bootstrap as per my steps 1 - 4. Took me 7 mins, not even 10 :-) ..paste the below into an index file to test/see what it looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Category</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputTitle" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="inputText" class="col-sm-2 control-label">Text</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" placeholder="Text" id="inputText"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap align horizontal

How can I have all align horizontal the below code renders as shown in the screen 1 and but I'm trying to have as shown in screen 2
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Number</label>
</div>
<div class="col-xs-3">
<input type="text" id="number"></input>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Tag</label>
</div>
<div class="col-xs-3">
<input type="text" id="Name"></input>
</div>
<div class="col-xs-3">
<button class="btn btn-default" type="button">Go!</button>
</div>
</div>
</div>
Screen shot 1:
Screen shot 2:

Your HTML structure is incorrect; you're nesting columns and rows and then columns inside columns for no reason. Docs
See example.
(*The columns are XS as in your example which in this case will not render very well from a mobile screen, consider using SM)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form class="myForm">
<div class="form-group">
<label for="Number" class="col-xs-2 control-label">Number</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="Number" />
</div>
</div>
<div class="form-group">
<label for="tag" class="col-xs-2 control-label">Tag</label>
<div class="col-xs-4">
<div class="input-group">
<input type="email" class="form-control" id="tag" /> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>