Label on the Left Side Instead Above an Input Field

Labels on the left side of my input fields

The easiest method, in my opinion, is to turn .wrapperSnippet into a CSS Grid layout.

Grid is supported by all modern browsers but IE supports an older version of the spec.

We can define the grid with two columns: one of width auto, and the other with 1fr. auto means that it will take up as much space as needed to fit the element, then the 1fr will fill the remaining space.

/* Added style */

.wrapperSnippet {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
}

/* Styles from question snippet */

.wrapperAddSnippet {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 1200px;
    margin: 10px 0 25px 80px;
}

.wrapperAddSnippet form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
}

.wrapperAddSnippet label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #3274d6;
    color: #ffffff;
}

.wrapperAddSnippet input[type="text"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}

.wrapperAddSnippet textarea {
    width: 500px;
    height: 600px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 0 15px;
}

<section class="wrapperAddSnippet">
        <form action="includes/addSnippet.inc.php" method="get">
            <div class="wrapperSnippet">
                    <label for="snippetTitle"><i class="fas fa-terminal"></i></label>
                    <input type="text" id="snippetTitle" name="snippetTitle" placeholder="Title">
                    <label for="snippetCat"><i class="fas fa-layer-group"></i></label>
                    <input type="text" id="snippetCat" name="snippetCat" placeholder="Snippet category">
                    <label for="snippetDesc"><i class="fas fa-i-cursor"></i></label>
                    <input type="text" id="snippetDesc" name="snippetDesc" placeholder="Snippet description">
                    <label for="snippetURL"><i class="fas fa-link"></i></label>
                    <input type="text" id="snippetURL" name="snippetURL" placeholder="Snippet URL">
                    <label for="snippetImage"><i class="fas fa-image"></i></label>
                    <input type="text" id="snippetImage" name="snippetImage" placeholder="snippet Image">
                    <button type="submit" name="submit">Save Snippet</button>
            </div>
            <div class="wrapperSnippet">
                    <label  for="snippet"><i class="fas fa-code"></i></label>
                    <textarea id="snippet" name="snippet" placeholder="Snippet"></textarea>
            </div>
        </form>
</section>

Styling Form with Label above Inputs

I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.

input, label {    display:block;}

<form name="message" method="post">    <section>
  <div style="float:left;margin-right:20px;">    <label for="name">Name</label>    <input id="name" type="text" value="" name="name">  </div>
  <div style="float:left;">    <label for="email">Email</label>    <input id="email" type="text" value="" name="email">  </div>
  <br style="clear:both;" />
    </section>
    <section>
    <label for="subject">Subject</label>    <input id="subject" type="text" value="" name="subject">    <label for="message">Message</label>    <input id="message" type="text" value="" name="message">
    </section></form>

label and input in same line on form-group

The col-sm-2 shouldn't be nested directly in col-md-12. Use the grid like this...

https://www.codeply.com/go/Gdt1BZs9Hg

<form class="col-12">
  <div class="form-row">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
  </div>
</form>

Notice that form-row must used to contain the col-. The col-sm-10 controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Also, note the correct use of the grid row > columns from the Bootstrap docs...

In a grid layout, content must be placed within columns and only
columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

input center, label above and to the left

Ok add a div container around the input and the label and then float the label left like this: https://jsfiddle.net/DIRTY_SMITH/f4fhn0wn/3/

<div id="completarcampos">
                <div class="container">
                <label id="lbltelefono" for="campotelefono">Numero de telefono:</label></br>
                <input type="text" id="campotelefono"/></br>
                </div>
                <div class="container">
                <label id="lblcontraseña" for="campocontraseña">contraseña:</label></br>
                <input type="text" id="campotelefono"/></br></br>
                </div>

                <a href="http://www.w3schools.com"><img id="ingresar" src="./imagenes/boton.png" alt="ingresar"/></a></br></br>
</div>

How to make label and input appear on the same line on an HTML form?

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {    background-color: #FFF;    height: 600px;    width: 600px;    margin-right: auto;    margin-left: auto;    margin-top: 0px;    border-top-left-radius: 10px;    border-top-right-radius: 10px;    padding: 0px;    text-align:center;}label {    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 18px;    color: #333;    height: 20px;    width: 200px;    margin-top: 10px;    margin-left: 10px;    text-align: right;    clear: both;    float:left;    margin-right:15px;}input {    height: 20px;    width: 300px;    border: 1px solid #000;    margin-top: 10px;    float: left;}input[type=button] {    float:none;}

<div id="form">    <form action="" method="post" name="registration" class="register">        <fieldset>            <label for="Student">Name:</label>            <input name="Student" id="Student" />            <label for="Matric_no">Matric number:</label>            <input name="Matric_no" id="Matric_no" />            <label for="Email">Email:</label>            <input name="Email" id="Email" />            <label for="Username">Username:</label>            <input name="Username" id="Username" />            <label for="Password">Password:</label>            <input name="Password" id="Password" type="password" />            <input name="regbutton" type="button" class="button" value="Register" />        </fieldset>    </form></div>

How do I get primeNg to position a label above the input text field?

Based on the attached HTML, you are applying Float Label.

If you want the label to be positioned at the top of input field, you can refer to InputText Demo (the Invalid section part).

HTML

<div class="p-field">
    <label for="formLogoId">My Name</label>
    <input type="text" formControlName="name" pInputText />
</div>

CSS

.p-field > * {
  display: block;
}

The CSS part is crucial, which all the elements under the element with the p-field class will be applied with style: display: block.

Without it, the <label> element will be at the left and the <input> element at the right (position).

Sample StackBlitz Demo

Output

Sample Image

You may consider for PrimeFlex, which is a CSS library for Prime UI.

Install primeflex library.

npm install primeflex

Import CSS in angular.json or root stylesheet.

"node_modules/primeflex/primeflex.css"

Apply PrimeFlex styling.

<div class="field">
    <label for="formLogoId">My Name</label>
    <input type="text" formControlName="name" pInputText class="w-full" />
</div>

Refer: FormLayout

Sample StackBlitz Demo (PrimeFlex)

How to align label text (multi-language) in a single line justified above the input box

Use flex and justify-content: space-between for alignment:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

p {
  margin: 0px;
}

.d-flex{
  width: max-content;
}
.text {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

 ::placeholder {
  font-size: 14px;
  font-weight: 600;
}

<div class="d-flex flex-column">
  <div class="text">
    <p>Customer Name</p>
    <p>الاسم</p>
  </div>
  <input class="form-control mb-3" type="text" placeholder="Customer Name" name="name" required>
</div>