I am not able to type in the input field. When I remove the first div that has the id="viewport" I am able to type in the input field. How am I able to solve this?
<div id="viewport"></div>
<div class="form">
<h2 id="h2">Need a project from<br>Google Cloud Storage?</h2>
<form id="fileDownloadForm" method="GET" action="downloadBlob2" enctype="multipart/form-data">
<input type="text" id="textBox" name="objectToSearch" placeholder="Type the name of the project here." />
<button id="downloadBtn" type="submit" class="btn btn_primary">Download</button>
</form>
</div>
You may solve this by adding css attribute #textBox{ z-index:1000; }. It seems that viewport block is too big and overflowing the input field. z-index makes the input field more "important" - the bigger it is, the more important the element becomes.
just in case to others, what works for me is putting in the immediate tag. So in this case I will try to put it in:
<div class="form" style="z-index: 1000 !important;">
In my case, somehow the text color changed to white. I found it by accidentally double-clicking the input field after typing few characters.
In my case i used Reactjs app for using
<input type="text" title="Search for products, brands and more" autocomplete="off" placeholder="Search for products, brands and more" name="" value="" />
You can see i put value="" so it is blank. That's why it was not working.
Related
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>
I am having problem with angular validation.
this one does'nt work...
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="text1.$error.required">Please enter something!</span>
but this works:
<form name="myform">
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="myform.text1.$error.required">Please enter something!</span>
</form>
is it possible to somehow correct the first one without placing it inside a form?
thanks
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
As far as I know, no, it is not possible. The FormController is what handles the states of each form element, so you need a reference to it in order to check the validation state.
I am working on an assignment and am a little lost. The question states:
Create a label element with the text Username. Within the label element, insert
an input box for the username field. Make the field required and add the title Supply
your username
Here is what I have. I am mainly confused on the title portion. Any help is greatly appreciated, and feel free to correct me on the other parts. Thank you
<form id="survey" name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS"
<label>
Username
<input id="username">
required="required"
</label>
</fieldset>
</form>
You just need to add a title attribute on the input field. Also the label tag can stay on it's own, which leaves to:
<form id="survey"
name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<label>Username</label>
<input id="username"
title="Supply your username"
required>
</fieldset>
</form>
The assignment is not well-defined, since it does not say what kind of a title should be included. It may refer to an advisory title that may be presented to user in some situations (e.g., on mouseover), as assumed in #Jeffrey’s answer. It may also refer to text that appears inside the input box when it is empty, in which case you would use the placeholder attribute. It can also refer to visible text before the input box; this would be the most reasonable setup. Even then, there are several alternatives. It could be just text before the label and the input box, or it could be wrapped in a heading element, or even a legend for a fieldset. The following example is based on the wild assumption that such a legend is desired (which might be a wrong guess if you have actually been told to use the fieldset element, as you are using, although there is no reason to use it in a simple case like this).
<form id="survey" name="survey"
action="http://www.example.com/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<legend>Supply your username</legend>
<label>
Username
<input id="username" name="username"
required="required">
</label>
</fieldset>
<input type="submit" value="Submit">
</form>
Notes: The attribute required="required" (or just required unless you have been told to use XHTML syntax) must appear inside the <input ...> element, not after it. And the input element needs a name attribute, otherwise the data in it will not be sent at all to the server.
This is my parent form parent-form.html with one submit button.
<form name="parent_form">
Name
<input type="text" id="name" name="name">
<input type="submit" id="submit" type="button" value="Submit"></button>
</form>
<iframe src="iframe_form.html" id="iframe_id" name="iframe_name"></iframe>
This is my iframe form iframe_form.html with one field in it.
<form name="iframe_form">
Address
<input type="text" id="address" name="address">
</form>
I want to submit both address field of iframe as well as name field of parent-form by clicking submit button of parent form.
There were other post related but none appropriate with simple method.
There's nothing wrong with iFrames but in this case, it's not efficient or easy.
If you want to avoid the problem of frames and forms, then use a scrollable division:
<div id="scrollcontent1" style="overflow-y: scroll; height:100px;">
Address: <input type="text" id="address" name="address">
</div>
If you want to have more than one on your page, use a sequence of them making sure the ID has a different name for each. You can then dynamically present what you need using the visible property and whatever javascript triggers you desire. Make sure you set the height property and if you want both scrollbars present, use overflow instead of overflow-y. It's a simple solution and it avoids the headaches of jquery as well as iframes.
Ihope you will get better mileage out of a helpful answer than and snobbish "ask the right question".
I am learning how to make forms and made this for practice. When I have labels out it and try to click into any of the form elements, it selects the previous one. For example, if I click into the password input box, it sends me to the username input box. When I remove the labels the bug goes away. I'm pretty sure labels aren't supposed to do this. The console isn't showing any errors so I'm confused to why this is acting up.
Here is my code:
<form action="">
<fieldset>
<label>username<label>
<input type="text" id="userInput"/>
<label>password<label>
<input type="password" id="passwordInput"/>
<label>Hidden<label>
<input type="hidden" id="hiddenInput" value="I can't tell you"/>
<label>Text Area<label>
<textArea id="areaInput" rows="10" cols="40">
This is a big area with lots of text.
</textArea>
<input type="button" onClick="" value="submit"/>
<fieldset>
<form>
Looks like you are not closing your label tags, so you are making another label. You need to close the <label> by using </label> - just a typo!
You're not closing out your <label> tag. Use the / slash on the closing tag:
<label>username</label>