폼쓰기

2015. 3. 24. 16:16IT/HTML

PHP input 설정


Input text

<th>투자지역</th>

<td colspan="3">

<?

// 인자값 설명 ("input name", "input value", "필수 : req, 필수아님 : '' ", "input claass 명");

echo get_input("투자지역", "wr_4", $write[wr_4])

  ?>

</td>




Input radio

<?

// 인자값 설명 ("항목명", "인풋네임", "array value", "인풋값", "radio사이에 구분값", "input class 명");

$arr_radio = array("동업","지분","전환사체","우선상환","일반대출","별도협의");

echo get_radio("투자지역", "wr_5", $arr_radio, $write[wr_5]);

?>


Input checkbox

<?

// 인자값 설명 ("항목명", "인풋네임", "array value", "인풋값", "checkbox 사이에 구분값", "input class 명");

$arr_checkbox = array("10,000","20,000","30,000","40,000","50,000","60,000");

echo get_checkbox("투자요금", "wr_6", $arr_checkbox, $write[wr_6]);

?>


Input select
<?
// 인자값 설명 ("항목명", "인풋네임", "array value", "인풋값", "req 입력하면 필수값으로, 입력안하면 필수값아님" , "input class 명");
$arr_select = array("접수중","진행중","입금완료","입금취소");
echo get_select("투자요금", "wr_7", $arr_select, $write[wr_7]);
?>

Input 핸드폰
<th>핸드폰</th>

<td>

<?

// 인자값 설명 ("input name", "input value", "필수 : req, 필수아님 : '' ", "select claass 명", "input class 명");

echo get_hp("wr_1", $write[wr_1]);

?>

</td>


Input 일반전화

<th>전화번호</th>

<td>

<?

// 인자값 설명 ("input name", "input value", "필수 : req, 필수아님 : '' ", "select claass 명", "input class 명");

echo get_tel("wr_2", $write[wr_2]);

?>

</td>


Input 이메일

<th>이메일</th>

<td colspan="3">

<?

// 인자값 설명 ("input name", "input value", "필수 : req, 필수아님 : ''", "select claass 명", "input class 명");

echo get_email("wr_email", $write[wr_email]);

?>

<input type="text" class='inputbox email' maxlength=100 name="wr_email"  title="이메일" value="<?=$email?>">

</td>


Input 주소

<th>주소</th>

<td colspan="3">

<?

// 인자값 설명 ("input name", "input value", "필수 : req, 필수아님 : ''", "input class 명");

add_javascript(G5_POSTCODE_JS, 0);    //다음 주소 js

echo get_addr("wr_3", $write[wr_3]);

?>

</td>






자주쓰는 색상표

---- 빨강, 파랑 color 색상 ---- 
빨강 : color:#af0000;
파랑 : color:#3881b1;
녹색 : color:#497b06;
주황 : color:#dd5928;
---- 빨강, 파랑 color 색상 ---- 

달력 폼
<?
//==============================================================================
// jquery date picker
//------------------------------------------------------------------------------
// 참고) ie 에서는 년, 월 select box 를 두번씩 클릭해야 하는 오류가 있습니다.
//------------------------------------------------------------------------------
// jquery-ui.css 의 테마를 변경해서 사용할 수 있습니다.
// base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader
// 아래 css 는 date picker 의 화면을 맞추는 코드입니다.
?>

<style type="text/css">
<!--
.ui-datepicker { font:12px dotum; }
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 70px;}
.ui-datepicker-trigger { margin:0 0 -5px 2px; }
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript">
/* Korean initialisation for the jQuery calendar extension. */
/* Written by DaeKwon Kang (ncrash.dk@gmail.com). */
jQuery(function($){
$.datepicker.regional['ko'] = {
closeText: '닫기',
prevText: '이전달',
nextText: '다음달',
currentText: '오늘',
monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',
'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월',
'7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
dateFormat: 'yymmdd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['ko']);

    $('#wr_5').datepicker({
        showOn: 'button',
buttonImage: '<?=$g4[path]?>/img/calendar.gif',
buttonImageOnly: true,
        buttonText: "달력",
        changeMonth: true,
changeYear: true,
        showButtonPanel: true,
        yearRange: 'c-99:c+99'
    }); 
});
</script>
<?
//==============================================================================
?>

인풋 박스

텍스트버튼

<input type="text" name="wr_1" value="<?=$write[wr_1]?>" style="width:110px;" class="inputbox" required itemname="성함">

라디오버튼

<input type="radio" name="wr_23" value="군필">&nbsp;군필&nbsp;&nbsp;

<input type="radio" name="wr_23" value="미필">&nbsp;미필&nbsp;&nbsp;

<input type="radio" name="wr_23" value="해당사항없음">&nbsp;해당사항없음&nbsp;&nbsp;

<script>$('input:radio[name=wr_23]:input[value="<?=$write[wr_23]?>"]').attr("checked", true);</script>

 

체크박스

<label><input type="checkbox" name="ca_id3[]" value="템플릿" >&nbsp;템플릿</label>

<label><input type="checkbox" name="ca_id3[]" value="편집이미지">&nbsp;편집이미지</label>

<label><input type="checkbox" name="ca_id3[]" value="무료이미지">&nbsp;무료이미지</label>

 <?

if(is_array($_GET[ca_id2])){

 $str_ca_id2 = implode(",",$_GET[ca_id2]);

}

?>

 <script>

  var str_ca_id3 = "<?=$str_ca_id3?>";

  $("input:checkbox[name='ca_id3[]']").each(function(index){

   if(str_ca_id3.indexOf($(this).val()) > -1){

    $(this).attr("checked", true);

   }

  });

 </script>

</ul>

 

셀렉트박스

<select name="wr_2" id="wr_2">

<option value="">[선택]</option>

<?for($j = 2014; $j < (date("Y")+3); $j++){?>

<option value="<?=$j?>"><?=$j?></option>

<?}?>

</select>

<script>$("#wr_2").val("<?=$write[wr_2]?>")</script>

 

체크박스 및 라디오 폼 유효성 검사

-------- Radio 유효성 및 체크 검사 ----------
if ($("input[name='wr_1']:checked").length > 0){
// one ore more checkboxes are checked
}
else{
// no checkboxes are checked
alert("상담종류를 선택해주세요."); 
$("input[name='wr_1']").focus();
return false; 
}

if(!$("#chkchk").is(":checked")){
alert("개인정보 수집 및 이용에 동의해주세요. ");
return;
}
-------- Radio 유효성 및 체크 검사 ----------

-------- Checkbox 유효성 및 체크 검사---------
if ($('.chkc').is(":checked")) {
}else{
alert("변경할 자료를 하나 이상 선택하세요.");
return;
}
-------- Checkbox 유효성 및 체크 검사---------

 

테이블 박스1

<style>

table.tb_order {width:100%; border-collapse:collapse; padding:0; margin:0;}

table.tb_order th, table.tb_order td {padding:10px; border:1px solid #d7d7d7; text-align:left;}

table.tb_order th {

padding: 10px 0 10px 20px;

width: 15%;

text-align: left;

border-bottom: 1px solid #d9d9d9;

background: #f7f7f7;

}

.must {

margin: 0 3px 0 0;

color: #e60013;

}

table tr.tb_bg_1 td {background:#f8f8f8;}

table tr.tb_bg_2 td {background:#f7fdff;}


table.tb_order tr td p {text-align:left;}


input.go_abtn {width:100px; text-align:center; margin:20px auto 0 auto; display:block; background:#555; color:#fff; padding:10px 20px; font-size:15px; font-family:Malgun Gothic; font-weight:bold;}


.inputbox {height:12px; padding:5px; margin-top:3px; margin-bottom:3px; border:1px solid #ccc;line-height:12px;width:120px;}

</style>

<p style="margin-top:20px;"><strong title="필수입력" class="must">*</strong>표시는 필수 입력내용입니다.</p>

<table class="tb_order">

<colgroup>

<col width="162px">

<col>

</colgroup>

<tr>

<th><strong title="필수입력" class="must">*</strong>고객명</th>

<td><input class="inputbox" type="text" name="wr_name" required itemname="고객명"></td>

</tr>

<tr>

<th><strong title="필수입력" class="must">*</strong>휴대폰</th>

<td>

<input type="hidden" name="wr_6" id="wr_6">

<input type="text" class="inputbox" name="wr_6_1" id="wr_6_1" maxlength="4" style="width:40px;" required itemname="고객명"> - 

<input type="text" class="inputbox" name="wr_6_2" id="wr_6_2" maxlength="4" style="width:40px;" required itemname="고객명"> - 

<input type="text" class="inputbox" name="wr_6_3" id="wr_6_3" maxlength="4" style="width:40px;" required itemname="고객명">

</td>

<tr>

<th>일반전화</th>

<td>

<input type="hidden" name="wr_9" id="wr_9">

<input type="text" class="inputbox" name="wr_9_1" id="wr_9_1" maxlength="4" style="width:40px;"> - 

<input type="text" class="inputbox" name="wr_9_2" id="wr_9_2" maxlength="4" style="width:40px;"> - 

<input type="text" class="inputbox" name="wr_9_3" id="wr_9_3" maxlength="4" style="width:40px;">

</td>

</tr>

<tr>

<th>이메일</th>

<td><input class="inputbox" type="text" name="wr_email" style="width:250px;"></td>

</tr>

<tr>

<th><strong title="필수입력" class="must">*</strong>고객명주소</th>

<td>

<input class="inputbox" style="width:30px;"  required itemname="주소" type=text name='wr_1' id='wr_1' size=4 maxlength=3 readonly  itemname='우편번호 앞자리' value='<?=$write[wr_1]?>'>

 - 

<input class="inputbox"  required itemname="주소" style="width:30px;" type=text name='wr_2' id='wr_2' size=4 maxlength=3 readonly itemname='우편번호 뒷자리'  value='<?=$write[wr_2]?>'>

&nbsp;<a href="#null" onclick="window.open('<?=$g4[path]?>/bbs/zip.php?frm_name=fwrite&amp;frm_zip1=wr_1&amp;frm_zip2=wr_2&amp;frm_addr1=wr_3&amp;frm_addr2=wr_4&amp;frm_jibeon=wr_5','pop_juso','width=620,height=800,scrollbars=yes')" id="reg_zip_find"><img width="91" height="20" src="/skin/member/no-member-admin/img/post_search_btn.gif" border=0 align=absmiddle></a>

<input type="hidden" name="wr_5" value="<?=$write[wr_5]?>" />

<div style="padding:3px 0;">

<input class="inputbox" style="width:300px;" required itemname="주소" type=text name='wr_3' id='wr_3' size=60 readonly itemname='주소' value='<?=$write[wr_3]?>'>

</div>

<div style="padding:3px 0;">

<input class="inputbox w300" style="width:300px;" required itemname="주소" type=text name='wr_4' id='wr_4' size=60 itemname='상세주소' value='<?=$write[wr_4]?>'> "번지"이하 아파트명

</div><span id="wr_5"></span>

</td>

</tr>

<tr>

<th>컴퓨터수리</th>

<td><input type="radio" name="wr_7" value="컴퓨터수리" <?if($write[wr_7]=="컴퓨터수리"){?> checked <?}?>>&nbsp;컴퓨터수리

<input type="radio" name="wr_7" value="데이터복구" <?if($write[wr_7]=="데이터복구"){?> checked <?}?>>&nbsp;데이터복구

<input type="radio" name="wr_7" value="노트북수리" <?if($write[wr_7]=="노트북수리"){?> checked <?}?>>&nbsp;노트북수리

<input type="radio" name="wr_7" value="모니터수리" <?if($write[wr_7]=="모니터수리"){?> checked <?}?>>&nbsp;모니터수리

<input type="radio" name="wr_7" value="네트워크" <?if($write[wr_7]=="네트워크"){?> checked <?}?>>&nbsp;네트워크

<input type="radio" name="wr_7" value="유지보수" <?if($write[wr_7]=="유지보수"){?> checked <?}?>>&nbsp;유지보수</td>

</tr>

<tr>

<th>신청내용(고장증상)</th>

<td><textarea name="wr_content" style="width:100%; height:150px;"></textarea></td>

</tr>

</table>

<input type="submit" class="go_abtn" value="신청하기">

 

 

테이블 박스2

<!-- table -->

<style>

/*s_table*/

.s_chart_01 {width:100%; margin:0; padding:0; border-collapse:collapse; border:1px solid #edf1f1; border-top:2px solid #739490; line-height:120%;}

.s_chart_01 th {padding:6px 10px; font-size:12px; color:#60807e; border:1px solid #e3eded; text-align:center; background:#f9fafa;}

.s_chart_01 td {padding:6px 10px; font-size:12px; color:#808080; border:1px solid #e3eded; background:#fff;}

.s_chart_01 td.cc1 {text-align:center; padding:6px 0;}

.s_chart_01 td.cc2 {text-align:center; font-size:12px; font-weight:bold; color:#60807e;}

.s_chart_01 th.bottom0 { border-bottom:0px; }

</style>

<table class="s_chart_01">

<colgroup>

<col width=""></col>

<col width=""></col>

<col width=""></col>

<col width=""></col>

</colgroup>

<tr>

<th>구분</th>

<th>2013 수능성적</th>

<th>2014 수능성적</th>

<th>성적향상점수</th>

</tr>

<tr>

<td style="text-align:center;">인문</td>

<td style="text-align:center;">208.8</td>

<td style="text-align:center;">250.0</td>

<td style="text-align:center;">41.5</td>

</tr>

<tr>

<td style="text-align:center;">자연</td>

<td style="text-align:center;">212.4</td>

<td style="text-align:center;">254.5</td>

<td style="text-align:center;">42.1</td>

</tr>

</table>

<!-- /table -->

 

 

// input

<style>

.guest_table{border-collapse:collapse;padding:0; border-spacing:0px; border-spacing:0;table-layout:fixed; width:100%;  background:#FFF;border:1px solid #DDD; margin-top:10px;}

.guest_table th{text-align:left; padding-left:20px; font:normal 9pt/30px gulim; border-bottom:1px solid #DDD;}

.guest_table td{text-align:left; border-bottom:1px solid #DDD; padding:4px 15px 4px 4px;}

.inputbox{height:12px; padding:4px; border:1px solid #aaa; border-right:1px solid #EEE; width:100%; border-bottom:1px solid #EEE;line-height:12px;}

 

.selectbox{height:22px; padding:2px; border:1px solid #aaa; border-right:1px solid #EEE; border-bottom:1px solid #EEE}

</style>

<table class="guest_table">

<colgroup>

<col width="120px" />

<col width="160px" />

<col width="120px" />

<col />

</colgroup>

<tr>

<th>학생이름</th>

<td><input class='inputbox' maxlength=20 name=wr_subject id="wr_subject" itemname="이름" required value="<?=$write[wr_subject]?>"></td>

<th>패스워드</th>

<td><input class='inputbox' name=wr_1 id="wr_1" itemname="패스워드" required value="<?=$write[wr_1]?>" style="width:80px;" maxlength="4"> ※4자리 입력</td>

</tr>

<tr ><?// 잘안쓴다는 의견땜에 주석처리함, 이메일 필요시 display block으로...?>

<th>날짜</th>

<td colspan="3">

<select name="wr_2" id="wr_2">

<option value="">[선택]</option>

<?for($j = 2014; $j < (date("Y")+3); $j++){?>

<option value="<?=$j?>"><?=$j?></option>

<?}?>

</select>

<script>$("#wr_2").val("<?=$write[wr_2]?>")</script>

</td>

</tr>

</table>