HTML5 form表单标签

表单标签可以把用户输入的数据传递给后台,这样来进行数据交互

代码实例:

<!DOCTYPE html>
<html>
<head>
    <title>表单标签</title>
</head>
<body>
<form method="post" action="xxx.php"> 
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" value="请输入用户名">
    <br>
    <label for="pass">密&nbsp;&nbsp;&nbsp;码:</label>
    <input type="password" name="pass" value="">
    <br>
    <textarea cols="31" rows="10" >在这里输入内容...</textarea>
    <br>
    <label>性别:</label>
    <label for="sexMan">男:</label>
    <input type="radio" name="sex" value="0" id="sexMan">
    <label for="sexWM">女:</label>
    <input type="radio" name="sex" value="1" id="sexWM">
    <br>
    <label>你的喜好:</label>
    <label>唱歌</label>
    <input type="checkbox"  checked="checked" name="loves" value="0">
    <label>跑步</label>
    <input type="checkbox" name="loves" value="1">
    <label>洗脚</label>
    <input type="checkbox" name="loves" value="2">
    <br>
    <label>爱好:</label>
    <select multiple="multiple">
      <option value="唱歌">唱歌</option>
      <option value="跑步">跑步</option>
      <option value="洗脚">洗脚</option>
    </select>
    <br>
    <input type="submit" name="submit" value="确定">
    <input type="reset" name="reset" value="重置">
</form>
</body>
</html>

效果:


Paste_Image.png

标签介绍:

<form   method="传送方式"   action="服务器文件">
method: 数据传送的方式(get/post)。
action:浏览者输入的数据被传送到的地方,比如一个PHP页面xxx.php

<input>文本输入框
type:当type="text"时,输入框为文本输入框;
          当type="password"时, 输入框为密码输入框。
          当 type="radio" 时,控件为单选框
          当 type="checkbox" 时,控件为复选框(type=单选/复选,可以设置 checked="checked"进行默认选中)
          当type="submit"时,按钮为提交作用,value为按钮的显示文字
          当type="reset"时,按钮为重置作用,value为按钮的显示文字
name:为文本框命名,以备后台使用。
value:为文本输入框设置默认值。(一般起到提示作用)

<textarea  rows="行数" cols="列数">多行文本</textarea>

<select>
      <option value="唱歌">唱歌</option>//value的值是传给后台的值,后面的值是显示给用户看的值
</select>
设置multiple="multiple"可以进行多选,按Ctrl进行选择

<label for="控件id名称">当设置for以后,假如代码重的性别进行了设置,那么在点击男或女这个文字的时候,就会选中后面单选框
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,009评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 这本书主要讲述演讲的技巧,作者热衷于观看研究TED演讲,从而总结出许多演讲的方法和技巧。单纯看这本书是很乏味的,而...
    chichichichi阅读 453评论 0 3
  • 此处献丑了(๑❛ᴗ❛๑)吐槽神马的尽管来 by:绿境之林
    phantomses阅读 146评论 0 2