html 表单标签<form>

<h6>常用的属性:</h6>

  • action: 表单提交到的地址,点击submit的提交按钮,就会把数据提交到action的地址
  • method: 提交方式。
  1. get
    1)提交的数据会放到地址栏上面
    2 ) get提交的数据不超过1kb,只适合简单的数据
  2. post
    1)提交的数据不会放到地址栏
    2)post提交的数据没有限制。比如文件上传
<form action="http://localhost:8080/Test/GetData" method="get">
    <!-- 单行输入域:
    常用的属性
        value: 该输入的默认值
         name: 这个必须填。该name的属性值用于给后台程序获取该标签输入的内容
         size: 可以输入的字符数量
     -->
    用户名:<input type="text" value="4-10位的字母或数字" name="userName" size="25" /><br/>
    <!--h5后有一个新属性:placeholder(占位符)这样就不再用value来做提示了-->
    
    <!--密码输入域: 以非明文的效果获取用户输入的数据。 -->
    密码:<input type="password" name="userPwd" /><br/>
    
    
    
    <!-- 单选: 
        注意: 
            1)如果是同一组的单选选项就使用相同的name属性值
            2)单选按钮的value属性一定填。这个value的值就是发送给后台程序的内容
            -->
    性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br/>
    
    
    
    <!-- 多选按钮:
        注意:
            1)如果是同一组的多选选项就使用相同的name属性值
            2)多选按钮的value属性一定填。这个value的值就是发送给后台程序的内容
    -->
    爱好:
    <input type="checkbox" name="hobit" value="篮球"/>篮球
    <input type="checkbox" name="hobit" value="足球"/>足球
    <input type="checkbox" name="hobit" value="兵乓球"/>兵乓球<br/>
    
  
    <!--
        下拉选项:
            注意: 
                1)name属性就是后台程序获取的标记
                2)下拉选项的option标签中的value属性一定填。这个value的值就是发送给后台程序的内容
     -->
     籍贯:
    <select name="jiguan">
        <option value="广东">广东</option>
        <option value="广西">广西</option>
        <option value="湖南">湖南</option>
    </select><br />
    
    
    <!-- 隐藏域:用于携带数据,但是在页面上不会显示效果
        注意: 
                1)name属性就是后台程序获取的标记
                2) 这个value的值就是发送给后台程序的内容
     -->
    <input type="hidden" name="id" value="001"/>
    
    
   
   <!--多行输入域:可以输入多行文本
    rows: 一共有几行
    cols: 一行可以输入几行字符
    -->
    个人简介:
    <textarea rows="5" cols="20" name="info"></textarea> 
    
    
    
    <!-- 提交按钮: 点击这个按钮,form中的全部数据就会发送到后台
        value: 表示按钮显示的文本
    -->
    <input type="submit" value="注册"/>
    
    
    
    <!--
        重置按钮: 点击这个按钮,form中的所有标签返回到初始默认状态
     -->
    <input type="reset" />

</form>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容