집 > 기사 > 웹 프론트엔드 > HTML에서 기본값을 설정하는 방법

HTML에서 기본값을 설정하는 방법

PHPz원래의: 2023-04-21 14:18:235804검색

HTML은 웹 페이지를 만드는 데 사용되는 기본 언어인 하이퍼텍스트 마크업 언어입니다. 웹 페이지에는 일반적으로 HTML, CSS 및 JavaScript의 세 가지 언어가 포함됩니다. 그 중 HTML은 웹페이지의 텍스트 내용, 구조, 레이아웃을 기술하는 데 사용되는 가장 기본적인 언어입니다.

웹 페이지를 디자인할 때 입력 상자, 드롭다운 상자, 라디오 버튼, 체크 상자 등과 같은 일부 컨트롤의 기본값을 설정해야 하는 경우가 있습니다. 이러한 컨트롤의 기본값은 사용자가 웹 페이지에 액세스할 때 이러한 컨트롤에 의해 표시되는 값입니다. 기본값이 설정되지 않은 경우 이러한 컨트롤은 일반적으로 비어 있습니다.

그렇다면 HTML에서 컨트롤의 기본값을 어떻게 설정하나요? 다음으로 함께 알아볼까요?

1. HTML에서 입력 상자의 기본값 설정

HTML에서는 태그에 value 속성을 설정하여 입력 상자의 기본값을 설정할 수 있습니다. 예:

<input type="text" name="username" value="admin"></p>
<p>위 코드에서 name 속성은 입력 상자의 이름이 "username"임을 나타내고, value 속성은 입력 상자의 기본값이 "admin"임을 나타냅니다. </p>
<p>2. HTML에서 드롭다운 상자의 기본값 설정</p>
<p>HTML에서는 <select> 태그에 selected 속성을 설정하여 드롭다운 상자의 기본값을 설정할 수 있습니다. 예: </p>
<pre class="brush:php;toolbar:false"><select name="fruit">
    <option value="apple" selected>Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

위 코드에서 첫 번째

3. HTML에서 라디오 버튼과 체크박스의 기본값을 설정하세요

라디오 버튼과 체크박스의 기본값은 태그에 selected 속성을 설정하여 얻을 수 있습니다. 예:

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

<input type="checkbox" name="hobby" value="reading" checked> Reading
<input type="checkbox" name="hobby" value="traveling" checked> Traveling
<input type="checkbox" name="hobby" value="sports"> Sports

위 코드에서 첫 번째 라디오 버튼과 처음 두 개의 확인란에는 체크 속성 세트가 있어 기본적으로 선택되어 있음을 나타냅니다. 라디오 버튼과 확인란의 이름 속성은 동일해야 합니다. 그렇지 않으면 동일한 옵션 그룹에 속하지 않습니다.

4. HTML에서 텍스트 영역의 기본값을 설정하세요

텍스트 영역은 여러 줄의 입력 상자이며 태그에서 텍스트 내용을 설정하여 기본값을 얻을 수 있습니다. 예: </p> <pre class="brush:php;toolbar:false"><textarea name="description">This is a description.</textarea></pre> <p>위 코드에서 텍스트 필드의 기본값은 "설명입니다." </p> <p>요약</p> <p>위의 방법을 통해 HTML에서 컨트롤의 기본값을 설정할 수 있으므로 사용자가 웹 페이지에 액세스할 때 이러한 컨트롤은 기본적으로 설정한 값을 표시합니다. 이는 사용자를 용이하게 하고 사용자 경험을 향상시킬 수 있습니다. </p> <p>기본값을 설정한다고 해서 사용자가 이러한 값을 입력해야 하는 것은 아닙니다. 사용자는 이러한 컨트롤의 값을 마음대로 수정할 수 있습니다. </p><p>위 내용은 HTML에서 기본값을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="DOCX 파일을 HTML로 변환하는 방법 살펴보기" href="http://m.php.cn/ko/faq/523890.html">DOCX 파일을 HTML로 변환하는 방법 살펴보기</a></span><span>다음 기사：<a class="dBlack" title="DOCX 파일을 HTML로 변환하는 방법 살펴보기" href="http://m.php.cn/ko/faq/523894.html">DOCX 파일을 HTML로 변환하는 방법 살펴보기</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/402895.html" title="Vue의 상위 구성 요소에서 하위 구성 요소 차트로 값을 전달하는 데 문제가 있습니다." class="aBlack">Vue의 상위 구성 요소에서 하위 구성 요소 차트로 값을 전달하는 데 문제가 있습니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/402896.html" title="React 이 바인딩에 대한 몇 가지 생각" class="aBlack">React 이 바인딩에 대한 몇 가지 생각</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/402897.html" title="Django는 요청을 사용하여 브라우저에서 보낸 매개변수를 가져옵니다." class="aBlack">Django는 요청을 사용하여 브라우저에서 보낸 매개변수를 가져옵니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/402898.html" title="JQuery의 DOM 작업 - 랩" class="aBlack">JQuery의 DOM 작업 - 랩</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/402899.html" title="프로토타입 및 프로토타입 체인 관련 내용 설명" class="aBlack">프로토타입 및 프로토타입 체인 관련 내용 설명</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>