• 01html基础03


    day03

    HTML表单

    表单

    <form>
    表单元素
    </form>

    注意:表单本身不可见

    <input> 表单输入标签
    <select> 菜单和列表标签
    <option> 菜单和列表项目标签
    <textarea> 文字域标签
    <optgroup> 菜单和列表项目分组标签

    <input type="类型属性" name="名称" .../>

    type属性值:text(文本域) password(密码域) file(文件域) checkbox(复选域) radio(单选域)
    Button(按钮) Submit(提交按钮) Reset(重置按钮) hidden(隐藏域) image(图像域)

    单行文本域

    <form>
    <input type="text" name="..." ..../>
    </form>

    属性:name Maxlength size(默认20个字符) value placeholder


    单选框
    <form>
    <input type="radio" name="..." value="..." checked />
    </form>

    图像域(图像提交按钮)

    <input type="image" name="..." src="imageurl" />

    隐藏域

    <input type="hidden" name="..." value="..." />

    下拉菜单和列表标签

    <select>
    <option value="..." >选项</option>
    <option value="..." >选项</option>
    ...
    </select>

    <select>标签属性:name multiple(多选) size(显示的个数,默认为1)
    <option>标签属性: value selected

    分组下拉菜单和列表标签

    <select>
    <optgroup label="组1" >
    <option value="..." >选项</option>
    <option value="..." >选项</option>
    ...
    </optgroup>
    <optgroup label="组2" >
    <option value="..." >选项</option>
    <option value="..." >选项</option>
    ...
    </optgroup>
    ......
    </select>

    多行文本域<textarea>
    <textarea name="..." rows=".." cols=".." ...>
    内容....
    </textarea>

    <textarea>标签属性:name placehorder rows cols

    <form>标签属性
    action method name target enctype

    案例(form_select.html):

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="utf-8">
      5     <title>表单select</title>
      6 </head>
      7 <body>
      8     <h1 align="center">注册信息</h1>
      9     <hr color="#336699">
     10     <form action="action.php" method="post" target="_blank">
     11         <table width="600px" bgcolor="#f2f2f2" align="center">
     12             <tr>
     13                 <td align="right">姓名:</td>
     14                 <td align="left">
     15                     <input type="text" name="username" size="25" maxlength="6" placeholder="请输入您的姓名">
     16                 </td>
     17             </tr>
     18             <tr>
     19                 <td align="right">邮箱:</td>
     20                 <td align="left">
     21                     <input type="text" name="email" size="25" value="@163.com">
     22                 </td>
     23             </tr>
     24             <tr>
     25                 <td align="right">密码:</td>
     26                 <td align="left">
     27                     <input type="password" name="paw" size="25" maxlength="6" placeholder="请输入您的密码">
     28                 </td>
     29             </tr>
     30             <tr>
     31                 <td align="right">确认密码:</td>
     32                 <td align="left">
     33                     <input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再次输入您的密码">
     34                 </td>
     35             </tr>
     36             <tr>
     37                 <td align="right">选择文件:</td>
     38                 <td align="left">
     39                     <input type="file" name="file">
     40                 </td>
     41             </tr>
     42             <tr>
     43                 <td align="right">性别:</td>
     44                 <td align="left">
     45<input type="radio" name="sex" value="man"checked>
     46<input type="radio" name="sex" value="man">
     47                 </td>
     48             </tr>
     49             <tr>
     50                 <td align="right">爱好:</td>
     51                 <td align="left">
     52                     读书<input type="checkbox" name="dx1" value="read" checked>
     53                     跳舞<input type="checkbox" name="dx1" value="dance">
     54                     唱歌<input type="checkbox" name="dx1" value="sing">
     55                 </td>
     56             </tr>
     57             <tr>
     58                 <td align="right">爱好的运动:</td>
     59                 <td align="left">
     60                     跑步<input type="checkbox" name="dx1" value="run" checked>
     61                     篮球<input type="checkbox" name="dx1" value="basketball">
     62                     跳绳<input type="checkbox" name="dx1" value="skip">
     63                 </td>
     64             </tr>
     65             <tr>
     66                 <td align="right">城市:</td>
     67                 <td align="left">
     68                     <select name="city">
     69                         <option value="xz">--请选择--</option>
     70                         <option value="bj">北京</option>
     71                         <option value="tj">天津</option>
     72                         <option value="sh">上海</option>
     73                         <option value="gz">广州</option>
     74                         <option value="sz">深圳</option>
     75                         <option value="cd">成都</option>
     76                         <option value="hz">杭州</option>
     77                         <option value="xa">西安</option>
     78                     </select>
     79                     <select name="city" multiple size="5">
     80                         <option value="xz">--请选择--</option>
     81                         <option value="bj">北京</option>
     82                         <option value="tj">天津</option>
     83                         <option value="sh">上海</option>
     84                         <option value="gz">广州</option>
     85                         <option value="sz">深圳</option>
     86                         <option value="cd">成都</option>
     87                         <option value="hz">杭州</option>
     88                         <option value="xa">西安</option>
     89                     </select>
     90                     <select name="city">
     91                         <option value="xz">--请选择--</option>
     92                         <optgroup label="华东">
     93                             <option value="bj">北京</option>
     94                             <option value="tj">天津</option>
     95                             <option value="sh">上海</option>
     96                             <option value="gz">广州</option>
     97                         </optgroup>
     98                         <optgroup label="华北">
     99                             <option value="sz">深圳</option>
    100                             <option value="cd">成都</option>
    101                             <option value="hz">杭州</option>
    102                             <option value="xa">西安</option>
    103                         </optgroup>
    104                     </select>
    105                 </td>
    106             </tr>
    107             
    108             <tr>
    109                 <td align="right">
    110                     <input type="hidden" name="hidden" value="这是一个用户注册信息">
    111                 </td>
    112                 <td align="left"></td>
    113             </tr>
    114             <tr>
    115                 <td align="right">简介:</td>
    116                 <td align="left">
    117                     <textarea name="jj" placeholder="请输入" rows="6" cols="50"></textarea>
    118                 </td>
    119             </tr>
    120             <tr>
    121                 <td align="right" colspan="2">
    122                     <input type="button" name="button" value="click me!">
    123                     <input type="submit" name="submit" value="submit">
    124                     <input type="reset" name="reset" value="reset">
    125                     <input type="image" name="image" src="image/image-button.png">
    126                 </td>
    127             </tr>
    128         </table>
    129     </form>
    130 </body>
    131 </html>

    案例演示:

  • 相关阅读:
    2018.09.08什么是ajax
    2018.09.03怎样让网页自适应所有屏幕宽度
    2018.08.25字符串和二维数组之间的转换
    2018.08.20MySQL常用命令总结(二)
    2018.08.15解决MySQL1290问题
    2018.08.13MySQL常用命令总结(一)
    2018.08.11MySQL无法启动错误码1067的解决方法
    2018.08.10 css中position定位问题
    2018.08.10jQuery导航栏置顶
    2018.08.07css实现图片放大
  • 原文地址:https://www.cnblogs.com/shink1117/p/8393605.html
Copyright © 2020-2023  润新知