Change html code HELP!

Away From Home · 06-12-2016 01:02PM #1

Hi, I'm trying to develop a website with a contact form in dreamweaver cs6 and youtube tutorials, I've made a fairly decent form from a tutorial and added it to a page, only problem is the colours, I'd like it to centre on the page.

What I'd like to do to it is change background to black, the text all centered, the reset button looking like the send button and both buttons red with black text, and a white border around the form.

And have it that it centres in the center of the page across devices.

Can anybody help me please?

Here is the html code:

<p> </p>
<p>
<style mm_ta_spry.widget.validationradio="mid">

#formwrapper {
width: 400px;
height: auto;
formwrapper: #000;
}
form {
width: 400px
height: auto;
background-color:#000;
}
fieldset {
background-color:#999;
border:thin; color:#000;
padding-bottom: 10px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:22px;
color:#FFF
}
label {
width: 300px;
display: block;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color:#FFF;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
input {
width: 300px;
border: thin solid #999;
margin-bottom: 10px;
}
textarea {
width: 300px;
border: thin solid #999;
margin-bottom: 10px;
}
.btn {
width: 80px;
height: 30px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-weight: bold;
background-color:#000;
margin-left: 10px;
margin-right: 10px;
float:inherit
}

</style>

<body>

</p>

<div id="formwrapper">
<form action="contact.php" method="post" target="_blank">
<fieldset>
<h1>
<div align="center">
<p><span class="lett">Contact Us</span>
<h1>
</p>
</div>
<label for="name">
Your Name:
</label>
<div align="center">
<input name="name" type="text" size="50" maxlength="100" />
</div>
<label for="email">
Your Email:
</label>
<div align="center">
<input name="email" type="text" size="50" maxlength="100" />
</div>
<label for"phone">
Your Phone Number:
</label>
<div align="center">
<input name="phone" type="text" size="50" maxlength="100" />
</div>
<label for="message">
Your Message:
</label>
<div align="center">
<p>
<textarea name="message" cols="50" rows="10"></textarea>
</p>
<p>
<input class="btn" name="submit" type="submit" value="Send" />
</p>
<p>
<label>
<input type="reset" value="Reset" />
</label>
</p>
</div>
</fieldset>

</form>

Buford T Justice · 06-12-2016 02:32PM

Don't use dreamweaver, it causes more problems than it sorts. Your CSS should also be in a separate style sheet

<p>&nbsp;</p>
<p>
    <style mm_ta_spry.widget.validationradio="mid">

        #formwrapper {
            width: 400px;
            height: auto;
            margin: 0 auto;
        }
        form {
            width: 400px
            height: auto;
            background-color:#000;
        }
        fieldset {
            background-color:#000;
            border:thin; color:#000;
            padding-bottom: 10px;
        }
        h1 {
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:22px;
            color:#FFF
        }
        label {
            display: block;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size: 16px;
            color:#FFF;
            text-align: center;
            margin-top: 5px;
            margin-right: 0px;
            margin-bottom: 5px;
            margin-left: 0px;
        }
        input {
            width: 300px;
            border: thin solid #999;
            margin-bottom: 10px;
        }
        textarea {
            width: 300px;
            border: thin solid #999;
            margin-bottom: 10px;
        }
        .btn {
            width: 80px;
            height: 30px;
            font-family:Georgia, "Times New Roman", Times, serif;
            color:#000;
            font-weight: bold;
            background-color:#FF0000;
            border: 1px solid #FFFFFF;
            margin-left: 10px;
            margin-right: 10px;
            float:inherit
        }


    </style>


<body>

</p>

<div id="formwrapper">
    <form action="contact.php" method="post" target="_blank">
        <fieldset>
            <h1>
                <div align="center">
                    <p><span class="lett">Contact Us</span>
                    <h1>
                    </p>
                </div>
                <label for="name">
                    Your Name:
                </label>
                <div align="center">
                    <input name="name" type="text" size="50" maxlength="100" />
                </div>
                <label for="email">
                    Your Email:
                </label>
                <div align="center">
                    <input name="email" type="text" size="50" maxlength="100" />
                </div>
                <label for"phone">
                Your Phone Number:
                </label>
                <div align="center">
                    <input name="phone" type="text" size="50" maxlength="100" />
                </div>
                <label for="message">
                    Your Message:
                </label>
                <div align="center">
                    <p>
                        <textarea name="message" cols="50" rows="10"></textarea>
                    </p>
                    <p>
                        <input class="btn" name="submit" type="submit" value="Send" />
                    </p>
                    <p>
                        <label>
                            <input class="btn" type="reset" value="Reset" />
                        </label>
                    </p>
                </div>
        </fieldset>


    </form>

Away From Home · 06-12-2016 09:57PM

Thanks a lot, that's perfect, I really appreciate that .

Change html code HELP!

Comments