HTML 05: 表单(FORM)标记(TAGS)

    技术2022-05-11  83

    表单(FORM)标记(TAGS)

     


     

    基本语法

    表单的基本语法

    <form action="url" method=*>... ... <input type=submit> <input type=reset></form>

    *=GET, POST

     

    表单中提供给用户的输入形式

    <input type=* name=**>

    *=text, password, checkbox, radio, image, hidden, submit, reset

    **=Symbolic Name for CGI script

     

    文字输入和密码输入

    *=text, password

    <input type=*><input type=* value=**>

    <form action=/cgi-bin/post-query method=POST> 您的姓名: <input type=text name=姓名><br> 您的主页的网址: <input type=text name=网址 value=http://><br> 密码: <input type=password name=密码><br> <input type=submit value="发送"><input type=reset value="重设"> </form>

    您的姓名: 您的主页的网址: 密码:

     

    <input type=* size=**><input type=* maxlength=**>

    <form action=/cgi-bin/post-query method=POST> <input type=text name=a01 size=40><br> <input type=text name=a02 maxlength=5><br> <input type=submit><input type=reset> </form>

     

    复选框(Checkbox) 和 单选框(RadioButton)

    <input type=checkbox><input type=checkbox checked><input type=checkbox value=**>

    <form action=/cgi-bin/post-query method=POST> <input type=checkbox name=水果1> Banana<p> <input type=checkbox name=水果2 checked> Apple<p> <input type=checkbox name=水果3 value=橘子> Orange<p> <input type=submit><input type=reset> </form>

    Banana

    Apple

    Orange

     

    <input type=radio value=**><input type=radio value=** checked>

    <form action=/cgi-bin/post-query method=POST> <input type=radio name=水果> Banana<p> <input type=radio name=水果 checked> Apple<p> <input type=radio name=水果 value=橘子> Orange<p> <input type=submit><input type=reset> </form>

    Banana

    Apple

    Orange

     

    图象坐标

    在下面选则一个系数后,在图象上点一下,就知道什么是图象坐标了!

    <input type=image src=url>

    <form action=/cgi-bin/post-query method=POST> <input type=image name=face src=f.gif><p> <input type=radio name=zoom value=2 checked>x2 <input type=radio name=zoom value=4>x4 <input type=radio name=zoom value=6>x6<p> <input type=reset> </form>

    x2 x4 x6

     

    隐藏表单的元素

    <input type=hidden value=*>

    <form action=/cgi-bin/post-query method=POST> <input type=hidden name=add value=hoge@hoge.jp> Here is a hidden element. <p> <input type=submit><input type=reset> </form>

    Here is a hidden element.

     

    列表框(Selectable Menu)

    基本语法

    <select name=*><option> ...</select>

    <option selected><option value=**>

    <form action=/cgi-bin/post-query method=POST> <select name=fruits> <option>Banana <option selected>Apple <option value=My_Favorite>Orange </select><p> <input type=submit><input type=reset> </form>

    BananaAppleOrange

     

    <select size=**>

    <form action=/cgi-bin/post-query method=POST> <select name=fruits size=3> <option>Banana <option selected>Apple <option value=My_Favorite>Orange <option>Peach </select><p> <input type=submit><input type=reset> </form>

    BananaAppleOrangePeach

     

    <select size=** multiple>

    注意,是用 Ctrl 键配合鼠标实现多选。(和 MS-WINDOWS 的 File Manager 一样) <form action=/cgi-bin/post-query method=POST> <select name=fruits size=3 multiple> <option selected>Banana <option selected>Apple <option value=My_Favorite>Orange <option selected>Peach </select><p> <input type=submit><input type=reset> </form>

    BananaAppleOrangePeach

     

    文本区域

    <textarea name=* rows=** cols=**> ... <textarea>

    <form action=/cgi-bin/post-query method=POST> <textarea name=comment rows=5 cols=60> </textarea> <P> <input type=submit><input type=reset> </form>

     

    对于很长的行是否进行换行的设置(Word Wrapping)

    <textarea wrap=off> ... </textarea>

    不换行,是缺省设置。

    <textarea wrap=soft> ... </textarea>

    “软换行”,好象 MS-WORD 里的“软回车”。 <form action=/cgi-bin/post-query method=POST><textarea wrap=soft name=comment rows=5 cols=25> </textarea><P><input type=submit><input type=reset></form>

    <textarea wrap=hard> ... </textarea>

    “硬换行”,好象 MS-WORD 里的“硬回车”。 <form action=/cgi-bin/post-query method=POST><textarea wrap=hard name=comment rows=5 cols=25> </textarea><P><input type=submit><input type=reset></form>

     

    最新回复(0)