Is there any simple language similar to Markdown or one of the Wiki Markups that gets converted into HTML form elements?
For example:
name* = ___________
sex = (x) Male () Female
phones = [] Android [x] iPhone [] Blackberry
city = {BOS, (SFO), NYC}
Would get converted to:
<label>Name (required):</label><input type="text" name="name" id="name"/>
<label>Sex:</label><input type="radio" name="sex" value="Male" checked="checked"/> <input type="radio" name="sex" value="Female"/>
<label>Phones:</label><input type="check" name="phones" value="Android"/> <input type="check" name="phones" value="iPhone" checked="checked"/> <input type="check" name="phones" value="Blackberry"/>
<label>City:</label>
<select name="city">
<option value="BOS">BOS</option>
<option value="SFO" selected="selected">SFO</option>
<option value="NYC">NYC</option>
</select>
It would be simple to create one myself, but if any existing library/language supports it already, it would save me some time in implementation, documentation and maintenance. It would be preferable if the library worked either in Java (so we could run it server-side) or JavaScript (so we could run it client-side).
Update: I created a github project for this and maleldil implemented it. Feel free to try it out!
I have not been able to find a library that suits my needs, so I forked the WMD project (which SO uses for its Markdown syntax highlighting) and put the project on on Github. I didn't have time to implement it, but maleldil kindly did it himself, so try it out!
I took a swing at the problem at https://github.com/bradgessler/formdown with a slightly different syntax:
Hi _________(Name)
How are you doing today? () Good () Ok () Bad
Could I have your email address? __________#(Email)
Write a few lines that describe your mood: ____________///(Mood)
[ Submit your feelings ]
This is packaged up as the formdown gem and can be used in Rails to render forms via the .fmd file extension (e.g. app/views/users/edit.fmd.html).
Not an answer.
I think it should read
sex = () Male () Female
in order to get radio buttons, because
sex = [] Male [] Female
would result in checkboxes (meaning you could be both male and female)
If your going to implement it. Also, you would hae to require one question per line, so you would know what to group up, otherwise any two () would be linked.
I also suggest you do not try to put values inside the () or [], since its easier to search for them w/o text inside. But you might also add () as selected and [] as checked. If you use that tho, you cant have that stream of characters apear in the questions.
Just my 2 cents in case your going to implement it.
<< GET "/post.php";
label*: __|n="inputname"|v|p|i|c|l|disabled|readonly;
password: *|n|v|p|i|c;
select: { 'multi word value'= 'Option', 'value2'='Option 2', !'value1'='Option 3' }&|n|i|c;
(!)|n|v :label for previous radio; ()|n|v :label for previous;
label for checkboxes: [!]|n|v; []|n|v;
Message:____|rows|cols|c|p|v;
File: ^|size||types|i|c
#submit|v="Send Message";
#reset|v="Reset Form";
>>
<< and >> are form start and end signs
"this is a label":
* immediately after the label is for required fields
__ is text input
| attributes are separated with pipes (n="name of the field"|c="class of the field")
; is for field separation
{} select is much like an associative array.
! is for checked/selected values
:"label that comes after the value" for radios and checkboxes
____ is textarea
^ caret is for file input (up sign for upload)
#submit for buttons
.. now only if someone implemented this. :)
i came across http://www.jspwiki.org/Wiki.jsp?page=WikiFormsPlugin some time back. not sure f you can reuse the class tho.
I am working on a PHP solution that extends Michelf Markdown. Currently, basic <input> and <textarea> elements are supported.
It uses this syntax:
?{type}("label" "value" "placeholder" rows*cols){.class}
Where type can be an input type (<input type="...") or textarea which results in a textarea.
See https://github.com/rbnvrw/markdown-forms for the code and feel free to contribute.
Related
I want an input that permits multiple files with file-specific params. What are my options? I'm in Vue so forgive the idiomatic HTML.
<input type="file" multiple #change="handle()" :data-page-number="whatever" />
Is there any way to do this within a multiple input? Or do I need to nest-and-repeat single inputs with their own specific fields for page-number etc?
It's Vue, but it's also HTML, so all input options for file upload are available to you. I am not sure what "types" you are looking for but this should get you started:
// In your template
<input
type="file"
multiple
name="uploadFieldName"
:disabled="isSaving" // Optional add a data property isSaving default false
#change="filesChange($event.target.name, $event.target.files, $event.target.files.length)";
accept="image/*"
// or for many
accept="image/png, image/jpeg"
class="input-file"
>
For all input attributes see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
// add to your component methods
filesChanged (inputName, files, filesCount) {
// Do Stuff
// if using saving this.isSaving = true; to disable input
}
The files argument will contain an array of File(s) for all option see: https://developer.mozilla.org/en-US/docs/Web/API/File
Hope this helps get you pointed in the right direction. If this answer missed the mark a bit please update your question with more relevant information around what you are trying to achieve and I can help clarify.
I am creating an HTML form, and I have text fields in my form that ask people to fill in their name. I don't want to user to fill in any of these characters when filling out their name-
! # # $ % ^ & * ( ) _ - + = { [ } ] | \ : ; " ' < , > . ? / 1 2 3 4 5 6 7 8 9
Is there any certain way I can do this? Thanks!
Ok, well you should really check for these characters at both the client-side using Javascript, and at the server-side using whatever you're using, PHP, ASP.NET, etc. Let me explain why you need each.
You should do the javascript validation because you want your user to see they did something wrong if they type in a disallowed character. For instance, you might make a warning in red test visible if it is not valid.
You might think that would take care of the problem, and it would, unless your users are crafty, and trying to screw with you. They can force a submission to your server that you would have checked for with your javascript if they had actually been using your page unmodified. They can easily rewrite your javascript to be whatever the heck they want. However, they cannot rewrite your validation code if it is running on your server when your server gets a submission.
So the javascript is for user-friendliness, and the server code is for security.
I don't know what back-end you're using, so I can't really help with that, but it will be fairly similar in functionality to the javascript code. Here we go.
Here's an example html document with a form:
<html>
<form
name="signupForm" action="registerUser.asp"
onsubmit="return validateForm()" method="post">
First name: <input id="nameInput" type="text" name="name">
<input type="submit" value="Submit">
</form>
</html>
Ok, now here's some accompanying javascript to implement that validateForm() function we saw:
function validateForm() {
var x = document.forms["signupForm"]["name"].value;
if (x == '!' || x == '#' || x == '#' || ... all your other conditions too ...) {
alert("Name cannot contain ... blah blah blah... characters.");
return false;
}
}
And that right there would do it for ya. Keep in mind please, that using the alert function is frowned upon. It's really antiquated and just not a good user experience. Perhaps instead you could put in a line of javascript to make a hidden text message near the input box visible, that displays the message instead. I'm sure you've seen that kind of thing before, and it's much more pleasant than an obnoxious pop-up message. You're not trying to punish your users for their typing mistakes.
Hope this helps. Also, you might want to consider allowing hyphens, they are really quite common in people's legal names. If this is your method of sanatizing database inputs, you're doing that the wrong way.
I've been developing product catalog. All my needs fit perfectly with MongoDB but there is one problem:
There are categories with structure like these:
{
title:"Auto", // for h1 on page
id: 1, // for urls
level: 1, //
left: 2, // nested set implementation
right:10 //
}
When user goes to url like "www.example.com/category/1" I need to show html forms to filter shown goods. I'm pretty sure it is bad idea to store static definitions for every category on the server(about 300 categories, i'm using Django => 300 form models?)
So my idea is to store meta-information about each category in MongoDB. After some research I found out that I need 3-4 "html widgets" to construct any filter form that I need.
For example:
Range fields will look like this in HTML
<fieldset>
<legend>Price</legend>
<label for="price_from">from</label>
<input type="text" name="price_from">
<label for="price_to">to</label>
<input type="text" name="price_to">
</fieldset>
And its MongoDB JSON representation:
{
name:"price",
title:"Price",
type:"range", // "range" type - 2 inputs with initial values
categories:[1,2,5],// categories to which this so called "widget" relates
values:[
{from: 100},
{to: 500}
]
}
One more example:
Group of selects:
Its HTML version
<fieldset>
<legend>Size and color</legend>
<select name="size">
<option value="small">Small size</option>
<option value="medium">Medium size</option>
<option value="huge">Huge size</option>
</select>
<select name="color">
<option value="white">White color</option>
<option value="black">Black color</option>
<option value="purple">Purple color</option>
</select>
</fieldset>
And its MongoDB JSON version:
{
title:"Size and color",
type:"selectgroup",
categories:[2,4,6]
items:[
{
name:"size",
values:["small", "medium", "huge"]
},
{
name:"color",
values:["white", "black", "purple"]
}
]
}
So the main idea is : fetch all widgets from collection by category_id, parse them and print complete HTML form.
Pros
Easy to add any new type of widget to database
Easy to add parser for such widget to generate HTML from JSON
Each widget can relates to many categories => no duplicates
Cons
Collection of widgets has no less or more fixed structure of the document(actually i don't see real problem here)
Аll values related to widget are embedded.
Hard validation because fields are dynamic => no corresponding model on server side (right now i don't have any idea how to validate this)
My question is: does anybody know a better way of doing this? Pros of my method are cool, but cons are terrible.
Thanks for help and sorry for bad English.
If you only need 3-4 sets of form widgets to display all necessary query forms for the 300+ categories, you should use Django forms to specify the widgets. You do not need 300+ Django forms for that as you can easily use multiple forms in one page.
As a quick example, your
<fieldset>
<legend>Price</legend>
<label for="price_from">from</label>
<input type="text" name="price_from">
<label for="price_to">to</label>
<input type="text" name="price_to">
</fieldset>
would become
class PriceForm(forms.Form):
price_from = forms.IntegerField()
price_to = forms.IntegerField()
...and of course the template to embed the form into which would provide the <fieldset> and other necessary html document structure.
EDIT:
As it seems that your form labels etc. depend on the category, you still need to have some information about the forms in the category documents in mongodb. However, by using django forms you get a lot of useful functionality for free, such as input validation.
You probably can parametrize the templates in such a way that you give the category-specific values (labels etc.) to the template from mongodb, along with the necessary forms.
Technique for constructing dynamic filtered (faceted) search with Map/Reduce: http://ianwarshak.posterous.com/faceted-search-with-mongodb
I have successfully migrated the code to Python (and used it in a Django project).
This must be something utterly stupid that I've done or am doing, but I have an input with a value attribute that simply isn't being displayed:
<div class="input text required">
<label for="Product0Make">Make</label>
<input name="data[Product][0][make]"
type="text"
maxlength="255"
value="AC Make"
id="Product0Make">
</div>
Has anyone ever seen this before? Do I have some kind of typo that I'm just blind to? For whatever it may be worth, here's the CakePHP code that's generating this line:
<?php echo $this->Form->input( 'Product.' . $index . '.make', array( 'default' => $product['Product']['make'] ) ) ?>
I have a small form with a handful of text inputs, 1 textarea and 2 selects. None of the text input values display, but everything else is fine.
Any thoughts would be appreciated. I can't even believe I'm having to ask this question, but that's how crazy it's making me.
Argh. I knew this was going to be something beyond stupid. There was a bit of Javascript that was clearing data. The clearing was useful in other places, but I didn't know it was executing so it was a serious pain to track down. Once I prevented the clearing in this scenario, my values actually appeared. Because I was looking at the code in web inspector, I assumed that it would be a "live" view, but I guess that's not entirely true.
Thanks for your help, everyone.
For my side, it was a problem only for Firefox.
I resolved by adding the attribute autocomplete="off" in the input field.
<input type="text" value="value must appear" autocomplete="off"/>
Mine was related to AngularJS
I was trying to put both an HTML Value and an ng-Model, thinking that the ng-Model would default to the Value, because I was too lazy to add the Model to the $scope in the Controller...
So the answer was to assign that default value to the $scope.variable in the controller.
For me it was browser caching. Changing the URL string or clearing history can help.
For Googler's who may have the same issue: This can happen if you have a non-numeric value in a number type input field.
For example:
<input type="number" value="<? echo $myNumberValue; ?> "/>
This will show nothing even though Dev tools says the value is there, since the extra space after ?> makes it non-numeric. Simply remove the extra space.
Are you confusing the uses of the 'default' and the 'value' parameters for $html->input()?
If you're are using 'default' => $product['Product']['make'] and $this->data is present, the field will not be populated. The purpose of the 'default' parameter is to display a default value when no form data ($this->data) is present.
If you want to force display of a value, you should use the 'value' parameter instead. 'value' => $product['Product']['make']
For me it was because I was using the <input> tag without enclosing it inside a <form> tag
Had a similar problem with input value retrieved via ajax, correctly set and verifiable via browser console, but not visible. The issue was another input field having the same id, and it was not evident because of several JSP files included, many of them having forms.
I even set autocomplete to "off" with no result. I ended up putting the next jquery snippet at the document.ready event.
myForm.find("input").each((i, el) => {
$(el).val($(el).attr("value"));
});
Adittionally, this would be the equivalent in pure es2015:
document.querySelectorAll("myForm input").forEach(el => {
el.value = el.getAttribute("value");
});
If your not using a precompilor like Babel and you need compatibility for old browser's versions, change the "(el) =>" for "function(el)". I tried both codes in my scenario and worked fine.
For me the problem was that I had multiple inputs with the same id. I could see the value in the field, but reading it via javascript gave an empty value because it was reading a different input with the same id - I was surprised that there was no javascript error, just could not read the values I could see in the form.
For me it was wrong number format: Chrome expected "49.1", but ASP.NET passed "49,1", and it just didn't display!
<input type="number" value="49,1"/> // Should have been 49.1 !!!
Same problem occured on electron:
I was clearing the field with document.getElementById('_name').value = '' instead of document.getElementById('_name').setAttribute('value', "").
So I guess simple quote broke the field or input has a second value hidden attribute because I could rewrite on the fields and it won't change the value on the inspector
I had the same problem of #Rob Wilkerson, a onchange() was cleaning the value of the input with "", so i changed to 1. Such a dumb problem!
HTML
<input class="form-control inputCustomDay" type="text" id="txtNumIntervalo" onkeyup="changeTipoOptions()" value="1" min="1" />
Jquery
$("#txtNumIntervalo").val(1);
Mine was related to Angular.
I just ran into the same issue recently and realized that when you use NgIf to display a template, the said template does not automatically use display the data from the variables in the component.
As a quick fix I used ngClass just to Hide it and display it.
If anybody happens to be here because their input with type="dateTime-local" is not displaying the value... the value must be in format YYYY-MM-DDThh:mm
I want to include some HTML in the labels of the radio buttons so that the user can click a link within that label. For example
<label for="value-12">
<input name="value" id="value-12" value="12" checked="checked" type="radio">
Doo Bee Dooo Bee Doooo
preview this song
</label>
The html keeps getting escaped. I want to stop that. I read about:
array('escape' => false)
Somewhere, but I don't know how to use that with
$value->setMultiOptions($songs);
or
$value->addMultiOptions($songs)
Any ideas? Thanks all!
EDIT
While setting escape to false for the "Label" decorator may work, this is not exactly what I want to do. I want to set escape to false for the labels of the multioptions. The following is not what I want to do. See the HTML I added in the setMultiOptions? That's what I want to escape:
$value = new Zend_Form_Element_Radio('value');
$value->setMultiOptions(array('NULL'=>'None A Link'));
$value->addMultiOptions($this->objlist);
$value->setLabel($this->title);
$value->getDecorator('Label')->setOption('escape', false);
And the answer is:
$value = new Zend_Form_Element_Radio('value', array('escape'=>false));
Thanks to alokin at:
http://forums.zend.com/viewtopic.php?f=69&t=5938&start=0&sid=987612aa8ff8193a04bf73a52196358b
Put it into decorators ;) you need to set that to the Label decorator ;)
$el->getDecorator('Label')->setOption('escape', false);
(not sure about concrete method names, but you get the point)