简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

HTML Form表单元素的详解

php中世界最好的语言
Lepaskan： 2018-01-20 09:51:13
asal
2384 orang telah melayarinya

这次给大家带来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>
Salin selepas log masuk

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

怎样用h5的sse服务器发送EventSource事件

H5的本地存储和本地数据库详细介绍

h5如何实现记住密码功能

Atas ialah kandungan terperinci HTML Form表单元素的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
form html 详解
sumber：php.cn
Artikel sebelumnya：HTML table的直列化格式是什么 Artikel seterusnya：浅谈使用HTML空链接的技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...
daripada 2024-04-06 17:40:41
0
2
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！