How do you add the title attribute to the DNN:Label control and have it render as a title attribute, <label title="myTitle">, in html?
Here is my code:
<div class="dnnFormItem">
<dnn:label id="lblDateNeeded" runat="server" controlname="DateNeeded" resourcekey="DateNeeded" />
<dnn:dnndatepicker runat="server" cssclass="dnnFormInput" id="DateNeeded" skin="Office2010Silver">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Office2010Silver"></Calendar>
<DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" LabelWidth="40%"></DateInput>
<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
</dnn:dnndatepicker>
</div>
this.Page.Title = "My Custom Title";
However, in DotNetNuke this will only work in the Page_PreRender method (verified in DotNetNuke 6.2.3).
If you want to set it earlier, you must still use this method which boils down to this:
((DotNetNuke.Framework.CDefault)this.Page).Title = "My Custom Title";
The above will work in Page_Load, Page_Init and Page_PreRender.
If you want to modularize it more, you can add the following in your base class for your modules (a good idea to always do this):
public DotNetNuke.Framework.CDefault BasePage {
get { return (DotNetNuke.Framework.CDefault)this.Page; }
}
And then simply use:
this.BasePage.Title = "My Custom Title";
The great thing about this method is that you can use it for the meta description and keywords as well.
this.BasePage.Description = "My Custom Description";
this.BasePage.Keywords = "My Custom Keywords";
Source
The title attribute is not accessible in the DNN label. As the OP noted, if specified as an attribute in the front end code, it will be ignored in the output HTML. Furthermore, if added in the code behind using YOURLABEL.Attributes.Add(), it will also be ignored.
Since it is not possible using the properties of the DNN label, another option is needed. One option is to address the issue with JQuery.
The HTML output by the DNN label looks like this:
<div class="dnnLabel">
<label>
<span id="#ASP_PATH#_#YOURID#">Test Label</span>
</label>
</div>
The following JQuery will set the title attribute of the label based on the text in the SPAN:
$('label').each(function () {
$(this).attr('title', $(this).text().trim());
})
Running this produced the following changes to the HTML:
<div class="dnnLabel">
<label title="Test Label">
<span id="#ASP_PATH#_#YOURID#">Test Label</span>
</label>
</div>
This function runs over all labels on the page. The JQuery selector could be modified to identify the labels you need to modify, if it's not everything on the page.
This may not produce the exact output you are looking for but you have plenty of flexibility with the JQuery function. If you need to set a special value for the label and you know what the text is going to be, you could use an if or switch to identify the specific label and process it accordingly.
Related
Sometimes I need some special UI component e.g multiple range slider, but I don't like using third party libraries, so usually I create component on my own. Over time I absolute stop using form tag, instead of that, I use just div and instead of onSubmit use just onClick, which call function, which return data from redux (also use my own redux form implementation). For example:
<div>
<div className="form-title">Some random Form</div>
<div className="form-body">
<Input
type="text"
label="Name: *"
form="random_form"
name="name"
/>
</div>
<div className="form-footer">
<Button onClick={()=> handleSubmit()}>Save</Button>
</div>
</div>
const handleSubmit = () => {
const form = getForm("random_form")
}
In this case I use component Input, which return normal html input (). But now I thinking that i will create some other pseudo form component, which will be build from some span and div. And my question - Is okay, when I don't use form tag and create own form component, which haven't default html equivalent.
Because of accessibility issues, it's generally preferable to have a form tag if you're making a form, but as other people mentioned, it's not required.
You do lose some functionality if you don't have a form tag. For example, if you had an input with required, it would get validated when the form is submitted, but since there is no form, it's not validated automatically. One of the more subtle issues I've encountered is that browsers might not save your input for autocompletion if no submit event happens.
I want to make an assignment where people look up an e-mail on a list of websites. If there I no e-mail to be found, I want them to check a box. If they check the box I want it to return a value like: "no e-mail found". Is there an easy way to do this? I'm holding a survey in Amazon Mturk.
Below you can find my current code. I have barely any knowledge of HTML.
From looking at the attached image I searched for 'crowd-checkbox' and found the documentation for that element. You can look at it here. If you go down to the 'Output' section you can see two examples of how you can set the value property of the checkbox element and how it looks when outputted as selected.
Yes you can use on change event of checkbox input:
In this code the span content changes as checkbox value changes.
$('#email_chk').change(function(){
var res = this.checked? "Is checked": "Not checked";
$('.result').text(res);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Email : <input type="checkbox" id="email_chk" />
<br />
Result : <span class="result">Not checked</span>
Is there a way to put text in a textbox but also allow the user to type something. I would like to write "username:" inside the box and allow the user to type after the colon. I can do this the hard way by creating a div right next to a textbox and make it look like they are one container, but I was wondering if there was an easier way? Thanks
EDIT: I don't want to text to disappear. I just want to user to be able to continue typing
EDIT 2: the reason you cant put a value in the textbox is because its a form. when the user types a username next to the value it will submit together
HTML5 has a placeholder attribute you can now use:
<input type="text" placeholder="username" />
People have also created javascript functions that mimic this functionality.
There's also a jQuery placeholder plugin which does the same, if you'd like to go that route.
What's wrong with using standard HTML? You don't say that you need it to disappear...
<input type="text" value="username: " />
If you need it to disappear, use a placeholder attribute and a jQuery plugin as a fallback (for the browsers that don't support it.
You could do something like this:
<div>
<label>Username:</label>
<input type="text" />
</div>
CSS
div{border:1px solid gray;}
label{font-family:arial; font-size:.8em;}
input{border:none;}
input:focus{outline:none;}
Basically, created a containing div and placed a label and input in that div. label is the words that stay in the field. input has the border removed.
http://jsfiddle.net/jasongennaro/rZmFx/
Fyi... you may need to increase the size of the input, depending on how many characters you want to accept.
<input type="text" placeholder="Category"/>
Maybe that can help you. If you want the textbox for only read you can put the property readonly = "".
You could call this javascript function once the page is loaded:
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
If you are using HTML5, you can use the placeholder attribute.
http://www.w3schools.com/html5/att_input_placeholder.asp
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload
I don't know if it has been asked before, couldn't find it either.
Is it possible to control the type of the input text that is rendered by an asp:TextBox? I would like to change it to <input type="date">
any suggestions or comments are welcome, thanks
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
If you don't mind subclassing, you can do this by overidding AddAttributesToRender
public class DateTextbox : System.Web.UI.WebControls.TextBox
{
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
writer.AddAttribute("type", "date");
base.AddAttributesToRender(writer);
}
}
Here is how I did it... hope it helps...
Add a new item to your project of the type "JScript File", then paste this code in:
var setNewType;
if (!setNewType) {
setNewType = window.onload = function() {
var a = document.getElementsByTagName('input');
for (var i = 0; i < a.length; i++) {
if (a[i].getAttribute('xtype')) {
a[i].setAttribute('type', a[i].getAttribute('xtype'));
a[i].removeAttribute('xtype');
};
}
}
Now add this line into your aspx page after the body tag (change the file name to whatever you called it above!):
<script type="text/javascript" src="setNewType.js"></script>
Finally, add something like the following to your code behind PageLoad ( I used VB here):
aspTxtBxId.Attributes("xtype") = "tel" ' or whatever you want it to be
The important part above is the Attributes.("xtype"), as it places the attribute XTYPE in the rendered html for the "textbox", which the javascript then finds and uses to replace the original "type" attribute.
Good Luck!
FJF
I know this question is old, but I was having the same issue in a Web Forms application. You need to use TextMode
While the documentation states that
Use the TextMode property to specify how a TextBox control is displayed. Three common options are single-line, multiline, or password text box.
You can also use html5, date, time, number, etc built in Visual Studio 2012/2013.
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textmode(v=vs.110).aspx
I went the route of building my own set of html5 inputs by building custom controls. I get the custom keyboards on iPad and iPhone plus the postback coding of true asp.net controls. It worked for my inhouse project, so I decided to license the whole suite to save other people the time and trouble of doing it from scratch.
Hope this helps!
Actually there is no easy way to override the type attribute in standart asp:TextBox.
You can simly use an input element
Here is an example
<input type="date" id="Input1" runat="server" />
Let me know if it helps...