HTML表单的用法

1. form元素

action: 提交到服务器的地址
method:提交表单使用的方法,一般有get和post两种

<from action="提交到服务器地址" method="get/post"></from>

2. 文本框

<input id="name" type="text" name="name" placeholder="用户名">

3. 多行文本框

<textarea id="comments" name="comments" cols="40" rows="15" placeholder="ddd"></textarea>

4. 密码框

<input id="password" name="password" type="password" placeholder="密码">

5. 单选

<div>
        <label>性别:</label>
        <input type="radio" name="gender" id="male" value="男" checked="">
        <label for="male">男</label>
        <input type="radio" name="gender" id="female" value="女">
        <label for="female">女</label>
    </div>

6. 多选

<div>
        <label>爱好:</label>
        <input id="radio-dota" name="hobbies" value="dota" type="checkbox">
        <input id="radio-travel" name="hobbies" value="旅游" type="checkbox" checked="">
        <input id="radio-pets" name="hobbies" value="宠物" type="checkbox" checked="">
    </div>

7. 隐藏域

<input type="hidden" name="#1234" value="abcd">

8. 下拉列表

<select name="mycar">
    <option value="萨博" selected="">萨博</option>
    <option value="宝马">宝马</option>
    <option value="奔驰">奔驰</option>
</select>

9. 按钮

<button>提交</button>
<input type="buttom" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">

10. 上传文件

<input type="file" name="pic" accept="定义上传文件类型 Ex.'image/*'">

11. label:当鼠标选择该标签时,关联的元素控件会获得焦点,for 属性与关联元素的 id 属性要相同。

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 3,240评论 0 1
  • HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...
    FLYSASA阅读 3,468评论 0 0
  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 3,952评论 1 1
  • 表单是一个包含表单元素的区域,而表单元素是运行用户在表单中输入信息的元素。通过表单,用户可以向服务器提交数据,而服...
    饥人谷_半岛王子阅读 3,552评论 0 51
  • 01 这个世界上有一头孤独的鲸鱼。 它叫Alice,被科学家发现于1989年。 从那个时候开始,这么多年过去了,它...
    R先森airy阅读 5,619评论 0 3