zoukankan      html  css  js  c++  java

  • 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>

    案例演示：
  • 相关阅读:
    HashMap、HashTable与ConcurrentHashMap的区别
    HashMap的扩容机制---resize()
    jdk7中hashmap实现原理和jdk8中hashmap的改进方法总结
    HTML5学习总结——canvas绘制象棋(canvas绘图)
    ShardingJdbc：水平切分
    ShardingSphere：基本概念
    KubeSphere：harbor+gitlab+nexus+springboot流水线部署
    k8s+jenkins：部署SpringCloud微服务
    k8s实现Jenkins的Master-Slave分布式构建
    windows下jar包转成exe执行文件
  • 原文地址：https://www.cnblogs.com/shink1117/p/8393605.html
Copyright © 2011-2022 走看看