HTML5-表单

HTML5-表单

一、Form

1.action 属性
action 属性用于指定表单提交时向何处发送表单数据,即需要发送的服务器地址

<form action="form.php">各种表单控件</form>

2.method 属性
method 属性用于指定表单向服务器提交数据的方法,包括两种方法,分别是 get 和post。
(1)get 方法的特点
使用 URL(统一资源定位符)传递参数:http://服务器地址?name1=value1&name2=value2,其中“?”符号表示要进行参数传递,“?”符号后面采用“name=value”的形式传递,多个参数之间,用“&”符号连接。URL 传递的数据量有限,只能传递少量数据。
PS:使用 URL 传递参数并不安全,所有信息可在地址栏中看到,并且可以通过地址栏随意传递其他数据。
(2)post 方法的特点
将数据封装后使用 http 请求传递,信息在地址栏中不可见,比较安全,并且传递的数据量理论上没有限制。
get 方法是表单提交的默认方法,但是通常采用 post 方法传递数据
3.enctype 属性
enctype 属性指定表单发送的编码方式,只有 method="post"时才有效,共有三种属性值。
1)application/x-www-form-urlencoded:此为默认值,如果 enctype 属性省略不写,则表示采取此种编码方式
2)multipart/form-data:不对字符编码,用于上传文件时使用。
3)text/plain:将空格转换为“+”符号,但不编码特殊字符,通常在将表单发送到电子邮箱时使用。

二、Input输入框

1.type 属性
type 属性表示 input 输入框的类型,它的默认值是 text。
2.name 属性
name 属性表示 input 输入框的名称,一般必填。因为传递数据时,使用“name=value”的形式传递。
3.value 属性
value 属性表示 input 输入框的默认值。

<form action="form.php"method="post">请输入内容:
        <input type="text"name="text1"value="输入框的默认值"/>
    </form>

4.placeholder 属性
placeholder 属性表示输入框中的提示信息,当输入框有 value 属性的时候,提示内容会消失,转而显示 value 属性值。

验证placeholder<input name="text2"type="text"placeholder="请输入"/>

5.tabindex 属性
tabindex=“1” 此属性控制按 Tab 键时的跳转顺序,从最小的数值开始,逐个往大的数值跳转,依次获得焦点。

三、Text文本输入框

文本输入框用于输入单行文本,默认宽度为 20 个字符。

<form action="form.php" method="post">
        请输入内容:
        <input name="text1" type="text" maxlength="10" size ="5"/>
        <!--上述代码表示这个文本输入框的最大字符长度为 10,可显示的字符数为 5 -->
        </form>

四、password:密码输入框

密码输入框输入的内容会以小黑点的形式替代显示。

<form action="form.php"method="post">密码框:
            <input name="pwd" type="password"maxlength="16">
        </form>

五、radio:单选按钮

单选按钮用于填写表单时信息选择,如调查问卷中的单选题

<form action="form.php"method="post">
            <input type="radio"name="sex"value=""checked="checked"/><input type="radio"name="sex"value=""/></form>

name 和 value 属性需同时存在,提交时,提交的是 value 中的属性值。
例如:<input type="radio" name="sex" value="男"/> 提交时,显示"sex=男"。
radio 凭借 name 属性区分是否为同一组。name 相同,为同组,同组中只能选择一个。
checked=“checked” 默认选中。radio 只能选一个,checkbox 可以选多个。

六、checkbox:复选按钮

复选按钮与单选按钮相同,也用于填写表单时信息选择

<form action="form.php"method="post">爱好选择:
            <input type="checkbox"name="hobby"value="sing"checked="checked"/>唱歌
            <input type="checkbox"name="hobby"value="draw"checked="checked"/>画画
            <input type="checkbox"name="hobby"value="dance"/>跳舞
        </form>

七、file:文件上传按钮

文件上传按钮用于文件上传,单击“选择文件”按钮会弹出对话框,选择需要上传的文件。

 <form action="form.php" method="post" enctype="multipart/form-data ">
            <input type="file"/>
            </form>

八、submit:表单提交按钮

表单提交按钮用于提交表单数据,单击按钮后,表单中用户填写的信息会被发送到表单指定的地方进行处理。当没有 value值时,submit 按钮中默认显示的文字为“提交”。

<form action="form.php" method="post">submit框:
            <input type="submit"value="登录">
        </form>

九、reset:重置按钮

重置按钮将表单数据重置为初始状态,通常是清空表单已填内容。

<form action="form.php" method="post">
            <input type="text"value="输入框的默认值"/>
            <input type="text"placeholder="请输入"/>
            <input type="reset"/>
        </form>

十、button:可单击按钮

定义一个可单击的按钮,通常与 JavaScript一起使用来启动脚本。

<form action="form.php"method="post">
            <input type="button" value="点我!" onclick="alert('这是一个按钮!')"/>
        </form>

十一、select 下拉选择控件

在表单中通过<select>控件可以创建一个下拉式的列表或带有滚动条的列表,可以在列表中选中一个或多个选项,通常用于填写生日、所在地区等信息。开发人员提前设计好选项,让用户在填写信息时可以直接选择,更加方便用户使用。
1.<select>标签的属性
1)name=“列表名”:所有选项只有一个 name。
2)multiple=“multiple”:设置 select 控件为多选,可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。
3)size=“1”:规定下拉列表中可见选项的数目。如果 size 属性的值大于 1,但是小于列表中选项的总数目,下拉列表就会显示出滚动条,表示可以查看更多选项。

十二、textarea 文本域

<input>的 type="text"不同,<textarea>创建的文本域是多行的,文本区中可容纳无限
数量的文本,其中文本的默认字体是等宽字体。通常采用 CSS(层叠样式表)来设置其宽度
和高度。文本域常见用于论坛回复的文本框、博客的留言板等。
基本语法:

<form action="form.php">
            <textarea style="width: 200px;height: 150px;">这是文本域的内容</textarea>
        </form>

十三、button按钮

<button>的作用是定义一个按钮,与<input>创建的按钮功能类似,也可以与 JavaScript
一起使用来启动脚本。
基本语法如下:

<form action="form.php">
            <button type="button">这是一个按钮</button>
        </form>

<button>内部可以放置内容,如文本或图像。这是该元素与使用<input>创建的按钮
之间的不同之处。
注意:始终需要为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的
type 属性使用不同的默认值。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值