简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML 양식 양식 요소에 대한 자세한 설명

php中世界最好的语言
풀어 주다： 2018-01-20 09:51:13
원래의
2380명이 탐색했습니다.

이번에는 HTML Form 양식 요소에 대한 자세한 설명을 가져왔습니다. HTML Form 양식 요소 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>注册表单</title>  
</head>  
<body>  
    <form action="DoFormAction.htm">  
        <fieldset style="width=800px">                                                              <!--套住注册表格的边框-->  
        <legend>请输入如下的信息然后进行注册</legend>  
        <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">  
            <tr>  
                <td align="right">用户名:</td>                                   <!--文本框-->  
                <td><input type="text" size="20" style="width:150px" /></td>  
            </tr>  
            <tr>  
                <td align="right">密码:</td>                                     <!--密码框-->  
                <td><input type="password" size="20" style="width:150px" /></td>  
            </tr>  
            <tr>  
                <td align="right">确认密码:</td>  
                <td><input type="password" size="20" style="width:150px" /></td>  
            </tr>  
            <tr>  
                <td align="right">性别:</td>                                      <!--单选框-->  
                <td>  
                    <input type="radio" checked="checked" name="sex1" value="男" />男    
                    <input type="radio" name="sex1" value="女" />女   
                </td>  
            </tr>  
            <tr>  
                <td align="right">性别(可以点文字选择):</td>  
                <td>  
                    <fieldset style="width:150px">                              <!--表单外框，也可以通过css设置宽度-->  
                    <legend>请选择性别</legend>  
                        <input type="radio" checked="checked" name="sex2" value="男" id="man" />  
                        <label for="man">男</label>  
                        <input type="radio" name="sex2" value="女" id="woman" />  
                        <label for="woman">女</label>  
                    </fieldset>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">城市:</td>                                    <!--下拉框-->  
                <td>  
                    <select name="city">  
                        <option value="北京">北京</option>  
                        <option value="深圳">深圳</option>  
                        <option value="上海">上海</option>  
                        <option value="南昌" selected="selected">南昌</option>  <!--默认选择南昌-->  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">城市所在区域:</td>  
                <td>  
                    <select name="area">            
                        <optgroup label="北京">                                <!--下拉框分组显示-->  
                            <option value="朝阳区">朝阳区</option>  
                            <option value="海淀区">海淀区</option>  
                            <option value="其他区">其他区</option>  
                        </optgroup>  
                        <optgroup label="南昌">  
                            <option value="东湖区">东湖区</option>  
                            <option value="西湖区">西湖区</option>  
                            <option value="青山湖区">青山湖区</option>                               
                        </optgroup>  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">交友目标:</td>  
                <td>  
                    <select name="target" size="3" multiple="multiple">        <!--列表框-->         
                        <option value="同行" selected="selected">同行</option>  
                        <option value="普通朋友">普通朋友</option>  
                        <option value="爱人">爱人</option>  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">爱好:</td>  
                <td>  
                                                                            <!--复选框,注意name属性设置一样，分组-->      
                    <input type="checkbox" name="love" value="足球" />足球   
                    <input type="checkbox" name="love" value="蓝球" />蓝球   
                    <input type="checkbox" name="love" value="乒乓球" />乒乓球   
                </td>  
            </tr>  
            <tr>  
                <td align="right">照片上传:</td>  
                <td>  
                                                                            <!--文件选择框-->      
                    <input type="file" name="myPic" />  
                </td>  
            </tr>  
            <tr>  
                <td align="right">自我介绍:</td>  
                <td>  
                                                                            <!--多行文本框-->      
                    <textarea rows="5" cols="50">  
                    </textarea>  
                </td>  
            </tr>  
            <tr>  
                <td align="center" colspan="2">  
                    <input type="submit" value="确定" />  
                    <input type="reset" value="清空" />                       
                    <input type="image" src="../images/btnreg.png" onclick="alert(&#39;hello&#39;)" />      <!--演示图片按钮(会提交数据，类似submit)  
                                                                                                    -->  
                </td>  
            </tr>  
        </table>  
        </fieldset>  
    </form>  
</body>  
</html>
로그인 후 복사

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5의 sse 서버를 사용하여 EventSource 이벤트를 보내는 방법

H5의 로컬 스토리지 및 로컬 데이터베이스에 대한 자세한 소개

h5가 비밀번호 기억 기능을 구현하는 방법

위 내용은 HTML 양식 양식 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
form html 详解
원천：php.cn
이전 기사：HTML 테이블의 직렬화 형식은 무엇입니까? 다음 기사：HTML 빈 링크를 사용하는 기술에 대한 간략한 토론
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！