HTML表单的用法

  • 和我们平时填写的纸质表单一样,HTML 表单用于搜集不同类型的用户输入。
  • 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
  • 用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。

常见用法

1.输入框

<form action="xxx.php" method="post">
            <h3>输入框</h3>
            <label for="input_username">用户名:</label> <input id="input_username" name="username" type="text" placeholder="输入用户名" autofocus/>
            <br/>
            <label for="input_pass">密码:</label> <input id="input_pass" name="password" type="password" placeholder="输入密码"/>
            <br/><br/>

2.单选框

 <h3>单选框</h3>
            <label for="ck1">ra1:</label><input type="radio" id="ra1" name="ra" value="1" />
            <br/>
            <label for="ra2">ra2:</label><input type="radio" id="ra2" name="ra" value="2" />
            <br/>
            <label for="ra3">ra3:</label><input type="radio" id="ra3" name="ra" value="3" />
            <br/>
            <label for="ra4">ra4:</label><input type="radio" id="ra4" name="ra" value="4" />
            <br/><br/>
            <label for="ck5">ra5:</label><input type="radio" id="ra5" name="radio" value="1" />
            <br/>
            <label for="ra6">ra6:</label><input type="radio" id="ra6" name="radio" value="2" />
            <br/>
            <label for="ra7">ra7:</label><input type="radio" id="ra7" name="radio" value="3" checked="checked" />
            <br/>
            <label for="ra8">ra8:</label><input type="radio" id="ra8" name="radio" value="4" />
            <br/><br/>

3.复选框

     <h3>复选框</h3>
            <label for="ck1">CK1:</label><input type="checkbox" id="ck1" name="ck" value="1" />
            <br/>
            <label for="ck2">CK2:</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
            <br/>
            <label for="ck3">CK3:</label><input type="checkbox" id="ck3" name="ck" value="3" />
            <br/>
            <label for="ck4">CK4:</label><input type="checkbox" id="ck4" name="ck" value="4" />
            <br/><br/>

4.文件上传

  <h3>File</h3>
            <input type="file" accept="image/gif, image/jpeg"/>
            <br/><br/>

5.图片按钮

    <h3>image 按钮</h3>
            <input type="image" src="xxx.jpg" alt="Submit Form"/>
            <br/><br/>

6.隐藏域


            <h3>隐藏域</h3>
            <input type="hidden" value="xxx" />
            <br/><br/>

7.下拉菜单

      <h3>下拉菜单</h3>
            <select id="input_select">
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <br/><br/>

8.文本域

 <h3>多行文本</h3>
            <textarea cols="60" rows="5">123</textarea>
            <br/><br/>

9.按钮

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

form

form标签是表单的外壳,主要有四个属性

  1. action: 表单提交的地址
  2. method:提交保单的方法
  3. target:在何处打开action
  4. enctype:
    application/x-www-form-urlencoded:在发送前编码所有字符(默认)
    text/plain:空格转换为 "+" 加号,但不对特殊字符编码
    multipart/form-data:使用包含文件上传控件的表单时,必须使用该值

password
输入内容自动变成圆点

checkbox
靠name
属性分组,提交到后端的时候被选中的value是以,
分割的一个字符串,通过name属性获得

file

accept:mime 类型,多个以,
分割
MIME

select
后端以select标签的name获取选中的option的value

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

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 457评论 0 1
  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 712评论 1 1
  • HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...
    FLYSASA阅读 451评论 0 0
  • 在 HTML 中,表单是由 标记定界的区域,包含文本输入框、按钮、复选框和图形用户界面的其他功能部件。Web ...
    莱昂纳德刚阅读 488评论 0 0
  • 每当看到充满套路的标题和营销方案,加上生活中各种噪音,就觉得生活充满虚无感,即每天过得很不真实。 不知道真实的世界...
    云莉6阅读 455评论 0 1