[前端] html列表框、文本域、文件域的示例代码

1912 0
王子 2022-10-19 15:49:52 | 显示全部楼层 |阅读模式
下拉框、文本域、文件域


上为演示效果下为代码
  1. <form method="get" action="result.html">
  2. <!--input:输入框标签,默认为text,文本框
  3.         name:为该输入框起一个名字,用来提交数据
  4.         maxlength="8":文本框最多可以输入8个字符
  5.         size="30":文本框的长度时30px
  6. -->
  7.         <p>用户名:<input type="text" name="username" value="文本框初始值"
  8.         maxlength="8" size="30"/></p>
  9. <!--密码框input type="password",密码框输入字符会显示为小圆点-->
  10.         <p>密码:<input type="password" name="pwd"/></p>
  11. <!--radio:单选框
  12.         value:初始值,单选框必须填
  13.         name:成组,否则单选会出现错误
  14.         input标签需要闭合
  15. -->
  16.         <p>性别:
  17.         <input type="radio" value="boy" name="sex"/>男
  18.         <input type="radio" value="girl" name="sex"/>女
  19.         </p>
  20. <!--checkbox:多选框
  21.         value:与选项对应的值
  22.         checked:默认选中,在input标签中使用
  23. -->
  24.         <p>爱好:
  25.         <input type="checkbox" value="sleep" name="hobby"/>睡觉
  26.         <input type="checkbox" value="code" name="hobby"/>敲代码
  27.         <input type="checkbox" value="chat" name="hobby"/>聊天
  28.         <input type="checkbox" value="game" name="hobby" checked/>游戏
  29.         </p>
  30. <!--button:普通按钮
  31.         type="image":图片按钮,用图片替换了按钮的样式
  32.         submit:提交按钮,将value的值提交给name对应的值
  33.         reset重置按钮,重置所有输入框
  34.         value:value的值即为按钮的名称
  35. -->
  36.         <p>按钮:
  37.         <input type="button" name="btn1" value="点击变长"/>
  38.         <input type="image" src="1.jpg"/>
  39.         </p>
  40. <!--select:下拉框标签
  41.         option:下拉选项标签
  42.         selected:默认选中,在下拉框标签中使用
  43. -->
  44.         <p>国家:
  45.         <select name="country">
  46.         <option value="cn" selected>中国</option>
  47.         <option value="usa">美国</option>
  48.         <option value="uk">英国</option>
  49.         <option value="jp">日本</option>
  50.         </select>
  51.         </p>
  52. <!--textarea:文本域
  53.         cols:文本域的列数
  54.         rows:文本域的行数
  55. -->
  56.         <p>反馈:
  57.         <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  58.         </p>
  59. <!--type="file":文件域
  60.         注意1:文件域用来选择文件,还需要一个上传按钮
  61.         注意2:此处有两个name,上传文件是将文件提交给了文件域对应的files
  62.                 并非按钮所对应的upload。
  63.                 也就是说选择文件后value=所上传的文件,上传后files=所上传的文件
  64. -->
  65.         <p>文件域:
  66.         <input type="file" name="files">
  67.         <input type="button" value="上传" name="upload">
  68.         </p>
  69.         <p>
  70.         <input type="submit" value="提交"/>
  71.         <input type="reset" value="重置"/>
  72.         </p>
  73. </form>
复制代码
到此这篇关于html列表框、文本域、文件域的示例代码的文章就介绍到这了,更多相关html列表框内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章,希望大家以后多多支持中国红客联盟!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

中国红客联盟公众号

联系站长QQ:5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行