HTML基础——表单提交

简介: 表单标签的作用就是可以把用户输入数据一起提交到web服务器

1. 表单属性设置

<form>标签 表示表单标签,定义整体的表单区域

  • action属性 设置表单数据提交地址
  • method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写


2. 表单元素属性设置

  • name属性 设置表单元素的名称,该名称是提交数据时的参数名
  • value属性 设置表单元素的值,该值是提交数据时参数名所对应的值


3. 示例代码

<form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名:</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密码:</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别:</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好:</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

复制


小结

  • 表单标签的作用就是可以把用户输入数据一起提交到web服务器。
  • 表单属性设置
  • action: 是设置表单数据提交地址
  • method: 是表单提交方式,提交方式有GET和POST
  • 表单元素属性设置
  • name: 表单元素的名称,用于作为提交表单数据时的参数名
  • value: 表单元素的值,用于作为提交表单数据时参数名所对应的值
目录
相关文章
|
6月前
|
前端开发
前端基础 - HTML框架集之FrameSet
前端基础 - HTML框架集之FrameSet
38 0
|
6月前
|
前端开发
前端基础 - HTML常用标签
前端基础 - HTML常用标签
28 0
|
3月前
|
数据采集 前端开发 JavaScript
【面试题】常见前端基础面试题(HTML,CSS,JS)
【面试题】常见前端基础面试题(HTML,CSS,JS)
166 0
|
移动开发 前端开发 数据可视化
|
Web App开发 移动开发 缓存
HTML5基础
HTML是HyperText Markup Language(超文本标记语言)的缩写,用于创建网页的标准标记语言。 HTML使用标记标签来描述网页,由浏览器来解析,即使用HTML来建立Web站点,通过Web浏览器读取HTML文档,并以网页的形式显示出来。 HTML5是HTML最新的修订版本。
HTML5基础
|
Java 数据库
html、sqlserver、java基础总结
html、sqlserver、java基础总结
97 0
|
前端开发 JavaScript Java
计算机二级web题目(3)--HTML基础
计算机二级web题目(3)--HTML基础
130 1
|
前端开发 SEO
HTML基础
很久以前的古老笔记了,希望对读者有所帮助。
66 0
|
存储 Web App开发 缓存
前端面试题整合(HTML,CSS等基础篇)
前端面试题整合(HTML,CSS等基础篇)
128 0
|
前端开发 JavaScript
html网页开发基础
讲述html代码结构和基本使用,查看更多...