<form>
    <label for="search">검색어:</label>
    <input
        type="text"
        id="search"
        name="search"
        required
        oninvalid="this.setCustomValidity('검색어를 입력해야 검색이 가능합니다.')"
        oninput="this.setCustomValidity('')"
    >
    <button type="submit">검색</button>
</form>

<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$search_skin_url.'/style.css">', 0);
?>
<!-- 전체검색 시작 { -->
<form name="fsearch" onsubmit="return fsearch_submit(this);" method="get">
    <input type="hidden" name="srows" value="<?php echo $srows ?>">
    <fieldset id="sch_res_detail">
        <legend>상세검색</legend>
        <?php echo $group_select ?>
        <script>document.getElementById("gr_id").value = "<?php echo $gr_id ?>";</script>
        <label for="sfl" class="sound_only">검색조건</label>
        <select name="sfl" id="sfl">
            <option value="wr_subject||wr_content"<?php echo get_selected($sfl, "wr_subject||wr_content") ?>>제목+내용</option>
            <option value="wr_subject"<?php echo get_selected($sfl, "wr_subject") ?>>제목</option>
            <option value="wr_content"<?php echo get_selected($sfl, "wr_content") ?>>내용</option>
            <option value="mb_id"<?php echo get_selected($sfl, "mb_id") ?>>회원아이디</option>
            <option value="wr_name"<?php echo get_selected($sfl, "wr_name") ?>>이름</option>
        </select>
        <label for="stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
        <span class="sch_wr">
            <!-- 
            기존 검색 필드에서 placeholder 추가- 약 27번째 line
            사용자 경험을 개선하기 위해  메시지"""일관된 사용자 경험(특정 구문)"""를 사용
            -->
            <input type="text" name="stx" value="<?php echo $text_stx ?>" id="stx" required class="frm_input" size="40" placeholder="일관된 사용자 경험(특정 구문)">
            
            <!-- 
            버튼 클릭 시 입력값 검증을 수행하는 JavaScript 함수 추가 
            -->
            <button type="submit" class="btn_submit" onclick="return validateInput();">
                <i class="fa fa-search" aria-hidden="true"></i> 검색
            </button>
        </span>
        <!-- JavaScript로 입력값 검증 로직 추가 -->
        <script>
        /**
         * 검색 입력값 검증 함수
         * - 빈 입력 필드에 대해 경고 메시지를 표시합니다.
         */
        function validateInput() {
            const searchInput = document.getElementById('stx').value.trim();
            if (!searchInput) {
                alert('Please type something before searching.'); // 경고 메시지
                return false; // 폼 제출 방지
            }
            return true; // 정상적으로 폼 제출
        }
        function fsearch_submit(f) {
            const stx = f.stx.value.trim();
            if (stx.length < 2) {
                alert("검색어는 두글자 이상 입력하십시오."); // 기존 메시지 유지
                f.stx.select();
                f.stx.focus();
                return false;
            }
            // 검색어 내 공백 검증 로직
            let cnt = 0;
            for (let i = 0; i < stx.length; i++) {
                if (stx.charAt(i) === ' ') cnt++;
            }
            if (cnt > 1) {
                alert("빠른 검색을 위하여 검색어에 공백은 한 개만 입력할 수 있습니다.");
                f.stx.select();
                f.stx.focus();
                return false;
            }
            f.stx.value = stx;
            return true;
        }
        </script>
        <div class="switch_field">
            <input type="radio" value="and" <?php echo ($sop == "and") ? "checked" : ""; ?> id="sop_and" name="sop">
            <label for="sop_and">AND</label>
            <input type="radio" value="or" <?php echo ($sop == "or") ? "checked" : ""; ?> id="sop_or" name="sop">
            <label for="sop_or">OR</label>
        </div>
    </fieldset>
</form>

class="frm_input" size="40" placeholder="일관된 사용자 경험(특정 구문)">