I'm trying to do something exactly like this sign up form here. They have appended their domain name as undeletable value to allow user to create a sub domain folder. I want to do the same with following input:
<input type="text" class="form-control inputlogin" name="subdomain_name" placeholder="Sub Domain" required="" value=""/>
I found a technique here but I'm not looking to append a prefix. The value must be after like in the example.
It is just a styling trick. input are either completely editable or disabled (not editable at all). There is no way to get around this.
What is done in the form you linked to is a trick where the "frozen" text is placed upon the input field so it looks as if it is a part of the actual input tag, but it is not.
Se my simple jsfiddle illustration. Look at how the styling can be used to create the illusion you want.
Here is an example using Bootstrap 3:
Bootstrap 3 Sub-domain input
<div class="container">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Your sub-domaion here">
<span class="input-group-addon" title="Type of Question">.our-domain.com</span>
</div>
</div>
</div>
Related
How to make "passed out year" field disable if the degree is not typed. May I know can we achieve it in html without .ts file use.
<div> Degree:
<input type="text" class="form-control" formControlName="degree" #degree/></div>
<div>
Passed Out Year
<input type="text" class="form-control" formControlName="passedYear"/></div>
Add this [disabled]="!formName.controls['degree'].value" in case you want any value, or this [disabled]="!formName.controls['degree'].valid" in case you want passedyear to be entered correctly.
However, if you need to implement more complex checks you may want to add custom validators.
It's not clear exactly how you are planning to use this, but you may not need to use Angular Forms if you're doing something simple. In that case you can accomplish what you need by just using ngModel like this
<div> Degree:
<input type="text" class="form-control" [(ngModel)]="degree" />
</div>
<div>
Passed Out Year
<input type="text" class="form-control" [disabled]="!degree" />
</div>
How can I both validate the pattern of an input field while use required attribute in an html form. I want to make 2 different warning message for each attribute.
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="Địa chỉ E-Mail" class="form-control" type="text" required
pattern=" /^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/"
oninvalid="this.setCustomValidity('Vui lòng nhập địa chỉ email')"
oninput="setCustomValidity('')"/>
</div>
</div>
</div>
And anyone have a working regex to check valid email? I found that regex on the Internet but it does not work correctly
Keep it simple :o) Unless you really need to go use the Constraint Validation API, as you are currently doing, I would go with regular Form Validation which has pretty good browser support.
Basically when you apply the required attribute on input elements they will be matched against a few conditions. One is the field cannot be left blank. A second is an optional pattern. In your case, you can specify type="email" and the browser will match the input for a valid email address. As far as I can read your request, the following should cover your needs:
<form action="">
<input type="email" required>
<input type="submit">
</form>
The risk of defining a custom pattern using regex is that you might end up testing for a faulty pattern. In your case, testing for example#example.cancerresearch would fail even if it's a valid email address.
I have a website that I want to read some data off, do a bunch of calcs, then fill out a form and submit it, all using excel vba.
I can read the website well enough, and do the calcs. I can also fill out a few of the inputs.
However, on this final form, my technique no longer works.
On the first few pages, the html has looked like
<input name="ProjectFile-BuildingPermitNumber" class="form-control" type="text" maxlength="100" data-bind="textInput: ProjectFile().BuildingPermitNumber">
and i I have been using , with elementname being projectfile-buildingpermitnumber
IEValue = objIE.document.getElementsByName(ElementName)(0).Value
to obtain the values and
objHTML.getElementsByName(ElementName)(0).Value = ValueCheck
to return them
I have also used
Set AllLinks = objIE.document.getElementsByTagName("A")
and a for loop to find buttons to click on. not the best technique, i probably should use a .click, but it works.
anyway, on this new form, I do not have an id or name to work with.
<div class="form-group">
<label class="col-sm-3 control-label">
<span> Structural</span>
</label>
<div class="input col-sm-7">
<input class="form-control" type="text" data-bind="value: DrawingsDocuments.Structural">
</div>
</div>
Anyone got an idea on how I can refer to these types of boxes using excel? Ive tried all the different getelement etc that MS HTML controls give.
Regards
Bryan
i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.