I want in the HTML element the CSS properties:
- height, width
- margins
- paddings
and added this html type element : "date" and "datetime-local"
This is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Start of the headers for CoffeeCup Web Form Builder -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<script type="text/javascript" src="common/js/form_init.js" data-name=""
id="form_init_script">
</script>
<link rel="stylesheet" type="text/css" href="theme/default/css/default.css?version=110"
id="theme" />
<!-- End of the headers for CoffeeCup Web Form Builder -->
<title>
todo_list
</title>
</head>
<body><!-- Start of the body content for CoffeeCup Web Form Builder -->
<style>#docContainer .fb_cond_applied{ display:none; }</style><noscript><style>#docContainer .fb_cond_applied{ display:inline-block; }</style></noscript><form class="fb-toplabel fb-100-item-column selected-object" id="docContainer"
action="../todo_list.php" enctype="multipart/form-data" method="POST" novalidate="novalidate"
data-form="manual_iframe">
<div class="fb-form-header" id="fb-form-header1">
<a class="fb-link-logo" id="fb-link-logo1" style="max-width: 104px;" target="_blank"><img title="Alternative text" class="fb-logo" id="fb-logo1" style="width: 100%; display: none;" alt="Alternative text" src="common/images/image_default.png"/></a>
</div>
<div class="section fb-100-item-column" id="section1">
<div class="column ui-sortable" id="column1">
<div id="fb_confirm_inline" style="display: none; min-height: 200px;">
</div>
<div id="fb_error_report" style="display: none;">
</div>
<div class="fb-item fb-100-item-column" id="item1" style="opacity: 1;">
<div class="fb-header">
<h2 style="display: inline;">
To Do List
</h2>
</div>
</div>
<div class="fb-item fb-66-item-column" id="item2" style="padding-top: 0px; padding-bottom: 0px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item2_label_0" style="display: inline;">Item</label>
</div>
<div class="fb-input-box">
<input name="item" id="item2_text_1" type="text" maxlength="254" placeholder=""
data-hint="" autocomplete="off" />
</div>
</div>
<div class="fb-item fb-33-item-column" id="item7" style="padding-top: 0px; padding-bottom: 0px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item7_label_0" style="display: inline;">Date</label>
</div>
<div class="fb-input-date">
<input name="date" class="datepicker" id="item7_date_1" type="text" data-hint=""
/>
</div>
</div>
<div class="fb-item fb-100-item-column" id="item19" style="opacity: 1;">
<div class="fb-html" style="margin:20px;">
<div id="item19_div_0" > <!-- </div>style="margin-bottom:40px; margin-top:10px;"> -->
Select a week:
<input type="week" name="week_year">
</div>
</div>
</div>
<div class="fb-item fb-100-item-column" id="item3" style="padding-top: 0px; padding-bottom: 10px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item3_label_0" style="display: inline;">Description</label>
</div>
<div class="fb-textarea">
<textarea name="description" id="item3_textarea_1" style="resize: none;"
maxlength="10000" placeholder="" data-hint=""></textarea>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item17" style="padding-top: 5px; padding-right: 4px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item17_label_0" style="display: inline;">Type</label>
</div>
<div class="fb-dropdown">
<select name="type_field" id="item17_select_1" required data-hint="">
<option id="item17_0_option" selected value="">
Defect
</option>
<option id="item17_1_option" value="Enhancement">
Enhancement
</option>
<option id="item17_2_option" value="Task">
Task
</option>
<option id="item17_3_option" value="Discussion">
Discussion
</option>
</select>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item6" style="padding-top: 5px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item6_label_0" style="display: inline;">Priority</label>
</div>
<div class="fb-dropdown">
<select name="priority_field" id="item6_select_1" data-hint="">
<option id="item6_0_option" selected value="Low">
Low
</option>
<option id="item6_1_option" value="Medium">
Medium
</option>
<option id="item6_2_option" value="High">
High
</option>
<option id="item6_3_option" value="ASAP">
ASAP
</option>
</select>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item10" style="padding-top: 5px; padding-right: 4px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item10_label_0" style="display: inline;">Status</label>
</div>
<div class="fb-dropdown">
<select name="status_field" id="item10_select_1" required data-hint="">
<option id="item10_0_option" selected value="">
Choose one
</option>
<option id="item10_1_option" value="Revised">
Revised
</option>
<option id="item10_2_option" value="Done">
Done
</option>
</select>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item18" style="padding-top: 5px; padding-right: 4px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item18_label_0" style="display: inline;">Time Estimate</label>
</div>
<div class="fb-dropdown">
<select name="time_field" id="item18_select_1" required data-hint="">
<option id="item18_0_option" selected value="">
Not Applicable
</option>
<option id="item18_1_option" value="Unknown">
Unknown
</option>
<option id="item18_2_option" value="Minutes">
Minutes
</option>
<option id="item18_3_option" value="Hours">
Hours
</option>
<option id="item18_4_option" value="Days">
Days
</option>
<option id="item18_5_option" value="One Week">
One Week
</option>
<option id="item18_6_option" value="Several Weeks">
Several Weeks
</option>
<option id="item18_7_option" value="Months">
Months
</option>
</select>
</div>
</div>
</div>
</div>
<div class="fb-item-alignment-left fb-footer" id="fb-submit-button-div"
style="padding-top: 20px; min-height: 1px;">
<input class="fb-button-special" id="fb-submit-button" type="submit" data-regular=""
value="Submit" />
</div>
<input name="fb_form_custom_html" type="hidden" />
<input name="fb_form_embedded" type="hidden" />
<input name="fb_js_enable" id="fb_js_enable" type="hidden" />
<input name="fb_url_embedded" id="fb_url_embedded" type="hidden" />
</form>
<!-- End of the body content for CoffeeCup Web Form Builder -->
</body>
</html>
I will edit this code:
<div class="fb-item fb-100-item-column" id="item19" style="opacity: 1;">
<div class="fb-html" style="margin:20px;">
<div id="item19_div_0" style="margin-bottom:40px; margin-top:10px;">
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</div>
</div>
</div>
<div class="fb-html" style="margin:20px;">
<div id="item19_div_1" style="margin-bottom:40px; margin-top:10px;">
Birthday:
<input type="date" name="bday">
</div>
</div>
</div>
1) I want see the text caption not on the left side but on the top side
2) how can I adjust the CSS properties : height, width, margin, padding in each HTML5 Form Element editing?
3) What are the steps and then sent to the server for display the changes
Kind regards
Stephane
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36