Dreamweaver CS6 Contact Form design without label - css

I know the process of creating a normal Contact Form using Dreamweaver CS6.
But for my contact form, I don't want labels like Name: Email: Message:
I want to state the label inside the textfield as initial value. When you click on the Name Textfield, the "Name" label disappears.
How do I make this effect?


You need to use the placeholder attribute in your input tag.
<input type="text" ... placeholder="First Name">
In Dreamweaver, you can find this attribute in the properties panel:


You can use place holders in the fields boxes but i do not recommend that.
here is a link.
http://www.pardot.com/faqs/forms/placeholders-and-labels/


if you dont want a label outside the input this is how it is normally achieved:
<input type="text" placeholder="Label Goes Here!">
if you notice when you input text it will dissapear and when you remove your text the placeholder will re appear!

Related

Checkbox click of input. Checkbox of other posts is selected

I put a check box on the input function to make a secret comment on one post and put a secret comment function.
The first post was applied without any problem, but the problem is that when I put a secret comment on the second post and click on the check box, the first check box is selected. If you click on the check box of the third post, the check box of the first post is selected. And I think it's a check box problem, but how do we solve this problem?
I didn't seem to explain well, so I brought it to the picture to see what my post looked like....;D
https://imgur.com/dCgA1Z7
<form action="#">
<p class="secretWrap">
<label for="secret">
<input type="checkbox" id="secret" class="checkbox" name="secret" />
<span>SECRET</span>
</label>
</p>
</form>
https://jsfiddle.net/4wd56t7a/

It's because you're using the same 'id' and 'for' attributes on both of your checkboxes. They need to be unique or else you're associating that label with the first instance of the id.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

How to make a input field read-only without affecting to it's CSS in razor mvc?

I have an input field which should not allow the user to edit. But when I make it read only it shades and all the applied "CSS" properties disappear. How can I make it read-only without affecting to "CSS"?
This is the code I have used
<input id="SID" name="SID" type="text" value="#Model.SID" readonly="readonly">
Please help.

Styling checkboxes in Contact form 7

When customising the look of a checkbox using CSS, to be able to work the magic we first need to link an element (eg. label) to the checkbox.
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
However I am using Contact form 7 (wordpress plugin) and I cannot find where to add the id within the checkbox. If you specify an id in CF7 it adds it to the containing div (.wpcf7-form-control), and not the checkbox itself.
Therefore I can't get it working.
Am I missing something? is there another way to link the label and the checkbox?
Many thanks

The format used by Contact Form 7 is a little different from your HTML, but there are some targeting options that should be sufficient to grab any element you need.
When creating your form, you'll generate a checkbox shortcode that looks something like this.
[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]
This code will generate:
A set of two checkboxes
Each of the two is wrapped in a <label> element (the text itself is in a <span>)
A parent element with the id="my-checkboxes"`
So the output markup will look something like this (along with some wpcf7 and Wordpress classes).
<span id="my-checkboxes">
<label>
<input type="checkbox" value="foo" /><span>foo</span>
</label>
<label>
<input type="checkbox" value="bar" /><span>bar</span>
</label>
</span>
Since you have an ID on the parent element, you can target this specific part of the form and elements within it using selectors in CSS or JQuery.
For example #mycheckboxes > label > input and #mycheckboxes > label > input + span.
For better targeting options, you can also create one checkbox per shortcode and assign an ID to each <span> checkbox container.
[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]
Since you're ultimate goal is to feed the information into Contact Form 7 (presumably to email it somewhere), it doesn't matter if you create each checkbox with a separate shortcode.

how to apply class on submit button such that it shows the desired submit image

i had an image which i want to be displayed instead of submit button. But i don want document.form.submit();
i.e
<input type="submit" value="" style="background:url("../images/submit.jpg");">
somewhat like this ... but m not getting it :(
so wat m i missing ?? plz help

There is an input type="image" for that.
Otherwise though, try to use single quotes inside the style argument.

What's the Literal control used for and what's the difference to the Label Control in asp.net?

What Literal control is used for in asp.net? and What is the difference between them and Label control?

The major difference is that the Label Control adds the span tag to the text (property) you set, allowing to apply a style to it:
<span>My Label text</span>
The Literal Control allows you to render any kind of content. You can use it to render scripts, hmtl and any other type of document content. It doesn't change the string you provide in the Text property.
Note: the Label control allows you to render straight HTML too, but it puts all your text in span tags as mentioned. So, for rendering large HTML portions a Literal control is the way to go.
P.S.: In HTML there is a <label> tag. If you use the AssociatedControlId property of the Label control, it will render as HTML <label> (thanks to Ray for pointing that out.)
For example:
<asp:Label runat="server" id="FirstNameLabel" AssociatedControlId="FirstNameTextBox">
Input First Name:
</asp:Label>
<asp:Textbox runat="server" id="FirstNameTextBox" />
Will render as:
<label for="FirstNameTextbox" id="FirstNameLabel">Input first name:</label>
<input type="text" id="FirstNameTextbox" name="FirstNameTextBox" />
See also here on W3 Schools.

One thing also to note is if you are justing using it to display something and have no need for formatting the text use a Literal control. The ViewState is not as heavy with a Literal vs a Label control and when you have many of these on a page using ViewState it can really bloat your page size.
I always ask myself, do I need to apply a custom style or formatting? Yes, use a Label. No, use a Literal.

It is used to display text on the page, the text that is displayed can be set at runtime via server side code.

The label control also has the AssociatedControlId property that associates the label with another control. An example of where this is useful is with a textbox control. Once these are associated, screen readers are more able to give better results.
Another example is a radio button with a label allows you to click on the label and the radiobutton will select if the AssociatedControlId property is set.
MSDN on AssoicatedControlId

As splattne mentions, the label encloses its text in a span, whereas the literal is simply a placeholder. However, be careful in making assumptions about how ASP.Net controls are going to render. It can depend on the user agent that you are using. For instance, the panel control renders as a div in IE, but renders as a table with Firefox.

It will place LITERALLY whatever text you place in it on the page. You can use it to write html, JavaScript or just plain text.

We can use literal control in the title tag whereas label cannot be used in the title tag
Label can be used to set focus on other controls like Textbox.
Whereas Literal simply rander the static text on the web page

Resources