How to align my label and input field - html

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>

Related

Bootstrap alignment with columns

I am using Bootstrap CSS framework and have a row with 2 columns one with input field and label and other with input field with no label. Here it's a jsfiddle.
I want the second input field to be aligned with first input field. How can I achieve this?
Any help would be highly appreciated.
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4">
<input type="text" id="Last Name">
</div>
</div>
</div>

You can try this
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4 align-self-end">
<input type="text" id="Last Name">
</div>
</div>
</div>

Change width of form semantic ui

Hi I'm working on a project using semantic ui. I have a form, as follows:
http://jsfiddle.net/5dyzpt77/
<div class="content">
<div class="ui main container">
<div class="ui form">
<div class="one field">
<div class="field">
<label>Email</label>
<div class="one field">
<div class="field">
<input type="text">
</div>
</div>
</div>
<div class="field">
<label>Address</label>
<div class="three fields">
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
</div>
</div>
</div>
</div>
However I don't want the form to be full width like it is, I'd like it to be 6 columns wide, but still centered, and I'm not sure how to go about doing that. Any help would be great.

Add to your form-div class six wide column centered and wrap it with div with class ui grid:
<div class="content">
<div class="ui main container">
<div class="ui grid">
<div class="ui form six wide column centered">
<div class="one field">
<div class="field">
<label>Email</label>
<div class="one field">
<div class="field">
<input type="text">
</div>
</div>
</div>
<div class="field">
<label>Address</label>
<div class="three fields">
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Read more about grid system here

To change the size of a field, you can simple put it in a division tag with class name as <size> wide field
example:
<form class = "ui form" action = "">
<div class="three wide field">
<input type = "text" name = "firstname">
</div>
<div class = "field">
<input type = "submit" value = "submit>
</div>
</form>
Click here for more details

Why can't I select my radio buttons?

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>

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;
}

Set 2 divs in one row

I tried to make 2 divs be in one row. Here is example : https://jsfiddle.net/cu0L469f/
But always i get each of it in separate row or they are as joined in one row.
<form id="postJob" class="login-form">
<div class="bro">
<div class="left4">
<div class="row-fluid clearfix">
<div class="col-lg-7 pull-left">
<label class="text_7">Full Address</label>
<input type="text" id="fromAddress" name="fromAddress" class="input" maxlength="1000"/>
</div>
<div class="col-lg-4 pull-left">
<label class="text_7">Postcode</label>
<input type="text" id="fromAddressPostCode" name="fromAddressPostCode" class="input" maxlength="8"/>
</div>
</div>
</div>
</div>
</form>

Because you are using only col-lg class and possible you seeing in small screen, you should also add col-md and col-sm and col-xs according to your need.
Go with link to see more details
<form id="postJob" class="login-form">
<div class="bro">
<div class="left4">
<div class="row-fluid clearfix">
<div class="col-sm-7">
<label class="text_7">Full Address</label>
<input type="text" id="fromAddress" name="fromAddress" class="input" maxlength="1000"/>
</div>
<div class="col-sm-5">
<label class="text_7">Postcode</label>
<input type="text" id="fromAddressPostCode" name="fromAddressPostCode" class="input" maxlength="8"/>
</div>
</div>
</div>
</div>
</form>