HTML 表单制作史上最详细笔记 form标签

最新推荐文章于 2024-10-13 16:48:19 发布
范枝洲
最新推荐文章于 2024-10-13 16:48:19 发布
阅读量634
点赞数 2
分类专栏： HTML+CSS
本文链接：https://blog.csdn.net/weixin_39972353/article/details/116245037
版权
HTML+CSS 专栏收录该内容
3 篇文章
订阅专栏
保存为html文件通过浏览器打开阅读更好哦。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 表单制作</title>


    <table border="1">
        <caption><h1>form标签属性介绍</h1></caption>
        <thead><tr><th>属性</th><th>介绍</th><th>备注</th></tr></thead>
        <tbody>
        <tr><td>action</td><td>设定表单处理程序的URL,即是要将这个表单提交到哪一个URL</td><td></td></tr>
        <tr><td>nethod</td><td>设定表单数据用哪一种方式传递给服务器端的程序,有两种值get/post, 其中get会以name/value的方式添加到URL变量中;而post会议数据包的方式传送到服务器的HTTP文件头中</td><td></td></tr>
        <tr><td>action</td><td>设定表单名称,一个HTML文件不可以有重复的表单名称</td><td></td></tr>
        <tr><td>accept-charset</td><td>设置文字编码</td><td></td></tr>
        <tr><td>autocomplete</td><td>自动填入功能,即浏览器会记住之前的输入,下次链接到相同网页会自动填入先前输入的数据,其取值可以为on/off</td><td></td></tr>
        <tr><td>enctype</td><td>可以设定表单数据传送到服务器的编码方式,有3个值:<br>application/x-www-form-urlencoded:默认值<br>multipart-form-data:在传送的表单有附加文件时使用<br>text/plain:在传送纯文本的表单中使用</td><td></td></tr>
        <tr><td>novalidata</td><td>这个属性用于设定在进行表单传送时,不对输入的数据做验证,比如type=url/mail时默认会校验是否为url或mail格式</td><td></td></tr>
        <tr><td>target</td><td>和a标签的target用法一致</td><td></td></tr>
        </tbody>
        <tfoot></tfoot>
    </table>

        <table border="1">
        <caption><h1>input标签属性介绍</h1></caption>
        <thead><tr><th>属性</th><th>介绍</th><th>备注</th></tr></thead>
        <tbody>
        <tr><td>accept</td><td>设定服务器可以接受文件的MIME类型,如果要指定多个MIME,可以用逗号隔开</td><td></td></tr>
        <tr><td>alt</td><td>如果无法输出图片内容,可以将此属性所指定的内容输出</td><td></td></tr>
        <tr><td>autocomplete</td><td>同form中autocomplete</td><td></td></tr>
        <tr><td>autofocus</td><td>网页显示时,输入字段的插入点将位于此属性设定的字段上,一个页面只能有一个表单组件有此设定</td><td></td></tr>
        <tr><td>checked</td><td>若设定这个属性勾选框(checkbox)将被勾选</td><td></td></tr>
        <tr><td>dirname</td><td>只能用在input和textarea中,用于设定文字走向信息,在传输数据到服务器端时,一定要加上.dir</td><td></td></tr>
        <tr><td>disable</td><td>设定停用某个字段,这样此字段就无法用来输入和单击</td><td></td></tr>
        <tr><td>form</td><td>可以令表单的字段和指定的form产生链接</td><td></td></tr>
        <tr><td>formaction</td><td>和action属性相同,这个属性可以设定表单数据程序的URL</td><td></td></tr>
        <tr><td>formenctype</td><td>和enctype相同</td><td></td></tr>
        <tr><td>formmethod</td><td>和method相同</td><td></td></tr>
        <tr><td>formnovalidate</td><td>和novalidate相同</td><td></td></tr>
        <tr><td>formtarget</td><td>和target相同</td><td></td></tr>
        <tr><td>height/width</td><td>设定图片高度和宽度</td><td></td></tr>
        <tr><td>list</td><td>定义候补选项,可将候补选项定义在datalist内</td><td></td></tr>
        <tr><td>maxlength</td><td>设定某字段可以输入的最多字符</td><td></td></tr>
        <tr><td>multiple</td><td>设定可以输入两个以上的值</td><td></td></tr>
        <tr><td>name</td><td>设定表单的域名</td><td></td></tr>
        <tr><td>pattern</td><td>用来验证input type=email/text/tel/search/url/password时格式是否符合规定</td><td></td></tr>
        <tr><td>placeholder</td><td>设定在某字段输入信息时提醒使用者的内容</td><td></td></tr>
        <tr><td>readonly</td><td>将某字段设为只能阅读/无法更改和编辑</td><td></td></tr>
        <tr><td>required</td><td>设定某字段时必须的</td><td></td></tr>
        <tr><td>size</td><td>这个属性应该为整数值,用于设定字段的宽度,所设定的长度代表字段可接受的字数,若用在下拉式菜单中,则表示可以看到的选项数目</td><td></td></tr>
        <tr><td>src</td><td>可设定图片文件的URL</td><td></td></tr>
        <tr><td>step</td><td>设置变化时的步进长度</td><td></td></tr>
        <tr><td>max/min</td><td>max设定字段输入的最大值,min设定输入的最小值</td><td></td></tr>
        <tr><td>value</td><td>设定默认文字,或是字段的默认值或文字</td><td></td></tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</head>
<body>

<hr>
<h1><mark>下面详细介绍input标签中type属性的使用</mark></h1>
<hr>
<section>
<p><h1>type=submit 提交按钮介绍</h1></p>

<form action="test" method="get">
    <p>使用默认按钮名称</p>
    <input type="submit">

    <p>
        <p>使用自定义名称:点击提交</p>
    <input type="submit" value="点击提交">
    <p>submit支持的其他属性有:autofocus/disable/form/formaction/formmethod/formnovalidate/formatarget</p>
    </p>
</form>
</section>
<hr>
<section>
<p><h1>type=reset 重设按钮介绍</h1></p>

<form >
    <p>使用默认按钮名称</p>
    <input type="reset">

    <p>
        <p>使用自定义名称:点击取消</p>
    <input type="reset" value="点击取消">

    <p>submit支持的其他属性有:autofocus/disable/form/name</p>
    </p>
</form>
</section>
<hr>

<section>
<p><h1>type=text 单行输入文本框</h1></p>

<form action="test" method="get">
    <p>请输入用户信息</p>
    <p><input type="text" name="user" size="1"></p>
    <p><input type="text" name="addr"></p>
    <p><input type="submit" value="确认">
    <input type="reset" value="重置"> </p>
    <p>text支持的其他属性有:autofocus/disable/form/autocomplete/list/maxlength/name/pattern/placeholder/readonly/required/size;<br> reset只是重置同一个form下的内容</p>
    </p>
</form>
</section>
<hr>

<section>
<p><h1>type=password 可输入密码的文本框</h1></p>

<form action="test" method="get">
    <p>请输入用户信息</p>
    <p>账号:<input type="text" name="user" size="20" autofocus placeholder="注意:不是你的姓名"></p>
    <p>密码:<input type="password" name="pwd" required></p>
    <p><input type="submit" value="确认">
    <input type="reset" value="重置"> </p>
    <p>password支持的其他属性有:autofocus/disable/form/autocomplete/list/maxlength/name/pattern/placeholder/readonly/required/size;<br> reset只是重置同一个form下的内容</p>
    </p>
</form>
</section>
<hr>

<section>
<p><h1>type=search 搜索框</h1></p>

<form action="test" method="get">
    <p>请输入搜索信息</p>
    <p><input type="search" name="search" autofocus placeholder="请输入关键词">
    <input type="button" value="搜索">
    <input type="reset" value="重置"> </p>
    <p>search支持的其他属性有:autofocus/disable/form/autocomplete/list/maxlength/name/pattern/placeholder/readonly/required/size/value;</p>
</form>
</section>
<hr>


<section>
<p><h1>type=image 制作图片按钮</h1></p>

<form action="test" method="get">
    <p>制作图片按钮,下面的图片时个按钮哦,点击这个图片,你会发现在给后台提交数据</p>
    <input type="image" src="\static\images\blueball.gif" alt="图片显示不了" width="50">
    <p>支持的其他属性有:autofocus/disable/form/formaction/formencytype/formmenthod/formnovalidate/formtarget/height/name/size/value/width;</p>
</form>
</section>
<hr>

<section>
<p><h1>type=tel 输入电话号码的文本框</h1></p>
<p><h1>type=Email 输入电子邮件的文本框</h1></p>
<p><h1>type=url 输入url的文本框</h1></p>
<form action="test" method="get">
    <p>请输入个人信息:</p>
    <p>电话号码:<input type="tel" name="phone" autofocus placeholder="010-1234567" ></p>
    <P>邮件地址:<input type="email" name="email" placeholder="test@123.com" pattern></P>
    <p>URL:<input type="url" name="url" value="https://"></p>
    <p><input type="submit" value="确认"><input type="reset" value="重置"></p>
    <p>tel:其他可设定的属性有autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、placeholder、readonly、required、size和value;</p>
    <p>email:他可设定的属性有autocomplete、autofocus、disabled、form、list、maxlength、multiple、name、pattern、placeholder、readonly、required、size和value</p>
    <p>url:其他可设定的属性有autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、placeholder、readonly、required、size和value。</p>
</form>
</section>
<hr>


<section>
<p><h1>type=radio 制作单选按钮</h1></p>
<form action="test" method="get">
    <p>性别:</p>
    <input type="radio" name="sex" value="1"> 男性<br>
    <input type="radio" name="sex" value="0"> 女性<br>

    <p>年龄:</p>
    <input type="radio" name="age" value="20" checked> 小于20岁<br>
    <input type="radio" name="age" value="40"> 20-40岁<br>
    <input type="radio" name="age" value="60"> 41-60岁<br>
    <input type="radio" name="age" value="70"> 大于60岁<br>
    <p>其他可设定的属性有autofocus、disabled、form和required。;</p>
    <p>相同单选组的name值要相同;value为单选按钮设定一个值,这个值将被送回服务器;checked:若设定,则对于按钮被勾选</p>
</form>
</section>
<hr>

<section>
<p><h1>type=checkbox 制作复选框</h1></p>
<form action="test" method="get">
    <p>性别:</p>
    <input type="radio" name="sex" value="1"> 男性<br>
    <input type="radio" name="sex" value="0"> 女性<br>

    <p>年龄:</p>
    <input type="checkbox" name="age" value="20" checked> 小于20岁<br>
    <input type="checkbox" name="age" value="40"> 20-40岁<br>
    <input type="checkbox" name="age" value="60"> 41-60岁<br>
    <input type="checkbox" name="age" value="70"> 大于60岁<br>
    <p><input type="reset" value="点击恢复默认选择"></p>
    <p>其他可设定的属性有autofocus、disabled、form和required。;</p>
    <p>同一组复选框组name值要相同;value为单选按钮设定一个值,这个值将被送回服务器;checked:若设定,则对于按钮被勾选</p>
</form>
</section>
<hr>

<section>
<p><h1>type=number 制作数值输入框</h1></p>
<form action="test" method="get">
    <p>年龄:<input type="number" name="age" min="1" max="110" placeholder="最大不超过110岁"></p>
    <p>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、placeholder、readonly、required和step。</p>

</form>
</section>
<hr>

<section>
<p><h1>type=range 制作指定范围的数值输入框</h1></p>
<form action="test" method="get">
    <p>满意度调查分值为1-100:<input type="range" name="grade" min="1" max="100" ></p>
    <p>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、placeholder、readonly、required和step。</p>

</form>
</section>
<hr>


<section>
<p><h1>type=color 指定颜色属性:让用户选择颜色</h1></p>
<form action="test" method="get">
    <p>色彩选择1:<input type="color" name="color1"></p>
    <p>色彩选择1:<input type="color" name="color1" value="#0000ff"></p>
    <p>其他可设定的属性有autocomplete、autofocus、disabled、form、list、name和value。</p>

</form>
</section>
<hr>

<section>
<p><h1>type=hidden 界面不显示但要传送到服务器的信息</h1></p>
<form action="test" method="get">
    <p>对自己居住地的满意度</p>
    <!--    下面hidden这一条在界面上将不显示-->
    <p><input type="hidden" name="gov" value="govID:001"></p>
    <p><input type="radio" name="city" value="A">满意</p>
    <p><input type="radio" name="city" value="A">尚可</p>
    <p><input type="radio" name="city" value="A">不满意</p>
    <p><input type="submit" value="提交"> <input type="reset" value="重选"></p>
    <ol>
        <li>其他可设定的属性有autofocus、disabled、form和name</li>
        <li>value: 不显示,但要传递到服务器的值</li>
    </ol>
<hr>


<section>
<p><h1>type=time 制作输入时间的控件</h1></p>
<form action="test" method="get">
<!--    时间跳动默认间隔1分钟-->
    <p>设定时间:<input type="time" name="time"></p>
<!--    时间跳动间隔1s-->
    <p>设定时间:<input type="time" name="time" step="1"></p>
<!--    时间跳动间隔120s-->
    <p>设定时间:<input type="time" name="time" step="120"></p>
    <ol>
        <li>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step和value</li>
    </ol>
</form>
</section>
<hr>

<section>
<p><h1>type=date 制作输入日期的控件</h1></p>
<form action="test" method="get">
    <p>日期设定:<input type="date" name="date"></p>
    <ol>
        <li>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step和value</li>
    </ol>
</form>
</section>
<hr>

<section>
<p><h1>type=week 制作输入周次的控件</h1></p>
<form action="test" method="get">
    <p>输入周次:<input type="week" name="week"></p>
    <ol>
        <li>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step和value</li>
    </ol>
</form>
</section>
<hr>

<section>
<p><h1>type=month 制作输入年份和月份的控件</h1></p>
<form action="test" method="get">
    <p>输入周次:<input type="month" name="week"></p>
    <ol>
        <li>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step和value</li>
    </ol>
</form>
</section>
<hr>

<section>
<p><h1>type=datetime UTC</h1></p>
<p><h1>type=datetime-local 本地时间属性</h1></p>
<form action="test" method="get">
    <p>输入UTC时间:<input type="datetime" name="dt"></p>
    <p>输入本地时间:<input type="datetime-local" name="dt"></p>
    <ol>
        <li>datetime可设定世界时间（格林威治时间或称Coordinated Universal Time（UTC）），也可称GMT时间；datetime-local可设定本地时间。下列是这两种时间的书写格式：<br>
datetime：YYYY-MM-DDThh:mm:ssZ，例如“2017-06-02T13:30:50Z”代表2017年6月2日13点30分50秒。<br>
datetime-local：YYYY-MM-DDThh:mm:ss，例如“2017-06-02T13:30:50”代表本地时间2017年6月2日13点30分50秒</li>
        <li>其他可设定的属性有autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step和value。</li>
    </ol>
</form>
</section>
<hr>

<section>
<p><h1>type=file 选择文件上传的控件</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>上传文件:<input type="file" name="upload"></p>
    <p><input type="submit" value="提交"><input type="reset" value="放弃"></p>

    <ol>
        <li>其他可设定的属性有autofocus、disabled、form、multiple、name、required和value。</li>
    </ol>
</form>
</section>
<hr>


    <section>
<p><h1>textarea 建立多行输入的文字框</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>请给出使用建议:</p>
    <p><textarea name="opinion1"  cols="30" rows="10">文字框使用非默认大小:cols="30" rows="10"</textarea></p>
    <p><textarea name="opinion2" >文字框默认大小</textarea></p>

    <ol>
        <li>cols: 可设定文字框的宽度,相当于1行可以输入的英文字符数,默认是20个字</li>
        <li>rows: 可设定行数,预设是2行</li>
        <li>wrap: 可设定传送文字框内容至服务器时要不要加上换行符,其值为分别为: <br>soft:默认值,除了按enter造成的换行外,其他借不加换行符传送 <br>hard: 若设定该值,则rows一定要设定字段宽度,值要因宽度换行的地方传送时一定要加上换行字符</li>
    </ol>
</form>
</section>
<hr>


    <section>
<p><h1>label 元素</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>个人信息:</p>
    <p>
        <label>姓名: <input type="text" name="user" autofocus> </label>
    </p>
    <p>性别信息:</p>
    <p>
        <input type="radio" name="sex" value="1" id="M">
        <label for="M">男性</label>
        <input type="radio" name="sex" value="0" id="F">
        <label for="M">女性</label>
    </p>
    <p>软件分析能力:</p>
    <p>
        <input type="checkbox" name="softw" value="html" id="HT">
        <label for="HT">HTML5</label>
        <input type="checkbox" name="softw" value="css" id="CS">
        <label for="CS">CSS3</label>
    </p>
    <ol>
        <li></li>
     </ol>
</form>
</section>
<hr>


        <section>
<p><h1>进度条的制作</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>不设进度:</p>
    <p>未指明进度: <progress max="100"></progress> </p>
    <p>设定35%进度: <progress value="35" max="100"></progress> </p>

    <ol>
        <li></li>
     </ol>
</form>
</section>
<hr>

        <section>
<p><h1>meter的制作</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>
        未指明min,high,low:
        <meter value="75" max="100"></meter>
    </p>

    <p>
        指明min,high,low:
        <meter value="85" max="100" min="0" high="85" low="60"></meter>
    </p>
    <ol>
        <li>value: 必须存在,仪表值</li>
        <li>max: 最大值</li>
        <li>min:最小值</li>
        <li>high:高标准值,若省略则和max值相同</li>
        <li>low:低标准值,若省略则和min相同</li>
        <li>optimum:最佳值,若不写,则取max和min中间值</li>
     </ol>
</form>
</section>
<hr>



        <section>
<p><h1>下拉式菜单的制作</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>
学历调查:
        <select name="education" >
            <option value="BA">大学</option>
            <option value="MS">硕士</option>
            <option value="PHD" selected>博士</option>
        </select>
    </p>

    <p>
美女调查:
        <select name="girl" >
            <option value="sh">骚货</option>
            <option value="jr">贱人</option>
            <option value="zn">渣女</option>
        </select>
    </p>
    <ol>
        <li>name: 元素内的name属性用于指定下拉式选单框架名称</li>
        <li>value:选单代表值,该值被送到服务器.如果省略value,则option元素内容将被送至服务器端</li>
        <li>selected: option元素如果有selected属性,代表这个选项时默认值了</li>
        <li>select元素可以设定属性:autofocus、disabled、form、name和required </li>
        <li>option元素的可设定属性：disabled和label。</li>

     </ol>
</form>
</section>
<hr>

        <section>
<p><h1>建立列表框</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>
学历调查:
        <select name="education" size="3">
            <option value="BA">大学</option>
            <option value="MS">硕士</option>
            <option value="PHD" selected>博士</option>
            <option value="phda">博士后</option>
        </select>
    </p>

    <p>
美女调查可多选:
        <select name="girl"  multiple size="3">
            <option value="sh">骚货</option>
            <option value="jr">贱人</option>
            <option value="zn">渣女</option>
            <option value="bc">幼齿</option>
        </select>
    </p>
    <ol>
        <li>select和option元素互相搭配可以制作另一种表单，称列表框。下面是组成列表框的select元素的属性设定</li>
        <li>size:列表框的行数</li>
        <li>multiple:若设定这个属性则选项可以复选.若省略size而设定这个属性则size默认时4行</li>

     </ol>
</form>
</section>
<hr>




        <section>
<p><h1>optgroup 选项组</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>
    最想去的城市 <br>
        <select name="city" id="city1">
            <optgroup label="contry">
                <option label="东京岛" value="TK">东京</option>
                <option label="北京" value="BJ">北京</option>
                <option label="香港岛" value="HK">香港</option>
            </optgroup>

            <optgroup label="欧洲">
                <option label="伦敦" value="LN">伦敦</option>
                <option label="巴黎" value="PA">巴黎</option>
                <option label="维也纳" value="VN">维也纳</option>
            </optgroup>
        </select>
    </p>
    <ol>
        <li>optgroup的label:不可省略</li>
        <li>option的label:如果浏览器支持,则显示,否则显示option里面的内容</li>
        <li>value:单击时传送到服务器端的值,如果省略则option元素内容被传送</li>
        <li>其他可设定的属性:optgroup元素中其他可设定的属性有disabled。</li>

     </ol>
</form>
</section>
<hr>


        <section>
<p><h1>制作文字框候补选项</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>个人信息</p>
    <p>姓名:<input type="text" name="user" list="member1"></p>
    <p><input type="submit" value="提交"> 
        <input type="reset" value="重置"> </p>
    
    <datalist id="member1">
        <option value="外国参访"></option>
        <option value="临时会员"></option>
        <option value="企业会员"></option>
    </datalist>
    <ol>
        <li>有时在使用input元素建立的输入文字框或搜索框内，允许用户自行输入要传送的数据，也允许建立一些候补选项，供输入时做选择。<br>可以利用datalist和option元素建立候补选项数据。</li>
        <li>ID:datalist元素id属性值的内容应该与使用input元素建立输入框组件的list属性值内容相同，如此才可将datalist元素和input元素进行关联</li>
     </ol>
</form>
</section>
<hr>


        <section>
<p><h1>表单组件群组化</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>一个表单难免会有许多组件，为了表单整理方便，HTML提供功能可以将表单的各组件组织起来，这个群组化的表单将有外框。fieldset元素主要是将所有的表单组件组织起来，在fieldset元素内的开头需加legend元素，这个元素用来设定这个群组化表单的标题。下列是这两个元素的使用格式。</p>
    <fieldset>
        <legend>表单群组化,多了这个框框</legend>
        <p>
学历调查:
        <select name="education" >
            <option value="BA">大学</option>
            <option value="MS">硕士</option>
            <option value="PHD" selected>博士</option>
        </select>
    </p>

    <p>
美女调查:
        <select name="girl" >
            <option value="sh">骚货</option>
            <option value="jr">贱人</option>
            <option value="zn">渣女</option>
        </select>
    </p>
    </fieldset>

    <ol>
        <li>fieldset元素中其他可设定的属性有disabled、form和name</li>
     </ol>
</form>
</section>
<hr>


        <section>
<p><h1>加密密钥keygen元素</h1></p>
<form action="test" method="post" enctype="multipart/form-data">
    <p>
        姓名:<input type="text" name="user">
        密钥:<keygen name="security">
        <input type="submit" value="提交">
    </p>
    <ol>
        <li>keygen元素可以在传送表单时产生一对加密密钥，公的密钥会送到服务器，私的密钥则保存在浏览器。</li>
        <li>keytype:加密的方法，目前有rsa、dsa和ec等3种方法，若省略则是使用rsa。</li>
        <li>challenge:出与密钥一起传送的数据将被认证</li>
        <li>其他可设定的属性有autofocus、disabled、form和name。</li>
     </ol>
</form>
</section>
<hr>
    

</form>
</section>
<hr>

</body>
</html>