Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
views:
183answers:
7
+12
A:
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Noon Silk
2010-07-21 23:54:47
I want to make a check box with custom background images (for both checked and unchecked). I would like to minimize the amount of code that needs to be handled when creating many of them.
Alan
2010-07-21 23:59:14
Ah. Well, in that case you tend to handle the repetitiveness either with a server code-reuse pattern (depends on your language) or a JavaScript one. What you want can be done pretty easily, but having a OnChanged event (or similar event, I forget which one is best) on the checkbox, and then change the background of it's container with JavaScript. It'll be pretty easy to search for how to do that. Ask again if you need specific help on it.
Noon Silk
2010-07-22 00:01:29
Which chump downvoted this? It’s the right answer. Argh.
Paul D. Waite
2010-07-22 00:09:14
As Augusto said in a comment on my answer, you can't edit the HTML itself, which W3C holds all rights. But you CAN create your own tags implementing a Schema and rendering your tags accordingly. -1 for not considering the OP wishes.
BrunoLM
2010-07-22 01:02:32
@Bruno: how will you get the browser to render your new tags?
John Saunders
2010-07-22 03:27:09
+2
A:
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one). In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
Alex Djioev
2010-07-21 23:55:25
+3
A:
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
BrunoLM
2010-07-21 23:56:32
What? Maybe I’ve misunderstood the question, but Facebook Markup Language doesn’t have much to do with HTML. It’s not interpreted by web browsers. Facebook reads it, and outputs standard HTML tags from it.
Paul D. Waite
2010-07-22 00:05:49
And schemas? No, no, no. For your own XML documents, yup. But on the web, for web pages that you serve to people over the internet for them to look at in their web browsers, no.
Paul D. Waite
2010-07-22 00:08:06
Both the tags and the question itself mention `javascript`. And, yes Schemas, if you don't like the idea, well I can't do anything... But it is surely nice to include a `<fb:like>` on your page and have everything done. And by the way, this is exactly what the OP asked, a tag that handles everything.
BrunoLM
2010-07-22 00:10:33
Seems to me that what Alan is looking for is what Bruno proposed, he just said "HTML" on the question as expression habit and the better example, he doesn't mean in the protocol sense, which W3C has the only rights.
Augusto Radtke
2010-07-22 00:19:59
Ah — sorry, I hadn’t realised you could use FBML on actual web pages. Downvote removed. I would note though that if you want to invent your own tags like Facebook have, you’d still need to implement something like their JavaScript SDK in order to have your new tags actually work in a web browser. It’s not like you write a schema, import it, and you’re done. You have to write JavaScript to convert your new tags into actual HTML tags, with associated behaviour implemented in JavaScript. You might as well just augment existing HTML tags with JavaScript in the first place.
Paul D. Waite
2010-07-22 00:21:16
@Augusto/BrunoLM: Sorry, but this question has a specific answer, which is: No. There are ways to do it, as others and I have said, but it's not achieving the specific goal of creating a new tag.
Noon Silk
2010-07-22 00:22:49
No, you cannot add new tags to HTML, unless you are writing the next HTML specification. HTML is a **language** and you cannot add new tokens to a language arbitrarily. However, you *can* add tags to **XHTML**, but that is because XHTML is an application of XML, and namespaces and schemas are features of XML.
Daniel Pryden
2010-07-22 00:26:56
@silky, there is two things here... What the OP wants, that is to create a tag which outputs a checkbox with his settings, which is possible as I've answered, and not considering what the OP want, so to say the "title question", then your answer would apply. I believe that my answer is what the OP is looking for.
BrunoLM
2010-07-22 00:30:55
@BrunoLM — although not really, because your answer just said he had to write a schema, when in fact he needs to write a JavaScript layer that turns his tags into HTML tags and adds JavaScript behaviour to them. If he’s doing that, he might as well put in HTML tags to begin with, and add JavaScript behaviour to them.
Paul D. Waite
2010-07-22 00:52:13
+1
A:
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
Sergey Ilinsky
2010-07-22 00:25:06
+1
A:
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/ http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
bpeterson76
2010-07-22 03:20:09
+2
A:
You need to write own doctype or/and use own namespace to do this.
olamedia
2010-07-22 03:36:39
A:
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
franzose
2010-07-23 02:45:08