前端零基础学习Day-Three

HTML表单

<!--语法:-->
<form>
    表单元素
</form>

表单本身不可见,可见的是表单元素


表单元素:

<input>表单输入标签
<select>菜单和列表标签
<option>菜单和列表项目标签
<textarea>文字域标签
<optgroup>菜单和列表项目分组标签

<input>标签(单标签):

<input type="类型属性" name="名称" ....../>

type属性值描述
text文字域
password密码域
file文件域
checkbox复选域
radio单选域
Button按钮
Submit提交按钮
Reset重置按钮
Hidden隐藏域
image图像域

单行文本域属性:

属性描述
name文字域的名称
maxlength指用户输入的最大字符长度
size指定文本框的宽度,以字符个数为单位;文本框的缺省宽度是20个字符
value指定文本框的默认值
placeholder规定用户填写输入字段的提示

图像域(图像提交按钮):

<input type="image" name="..." src="imageurl"/>

隐藏域:

<input type="hidden" name="..." value="..."/>

下拉菜单和列表:

<select>
    <option value="...">选项</option>
    <option value="...">选项</option>
</select>

<select>标签属性:

name设置下拉菜单和列表的名称
multiple设置可选择多个选项
size设置列表中可见选项的数目

<option>标签属性:

selected设置选项初始选中状态
value定义送往服务器的选项值

分组下拉菜单和列表标签:

<select name="">
    <optgroup label="组1">
    <option value="...">选项</option>
    <option value="...">选项</option>
    ......
    </optgroup>
    <optgroup label="组2">
    <option value="...">选项</option>
    <option value="...">选项</option>
    ......
    </optgroup>
</select>

多行文本域:

<textarea name=".." rows=".." cols=".." ...>
    内容......
</textarea>

多行文本域属性值

name设置文本区的名称
placeholder设置描述文本区域预期值的简短提示
rows设置文本区内的可见行数
cols设置文本区内的可见宽度

表单案例:

<!DOCTYPE html>
<html>
    <head>
        <title>表单</title>
    </head>
    <body>
        <h1 align="center">注册信息</h1>
        <hr color="336699"/>
        <form>
            <table width="600px" bgcolor="f2f2f2" align="center">
                <tr>
                    <td align="right">姓名:</td>
                    <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
                </tr>
                <tr>
                    <td align="right">邮箱:</td>
                    <td align="left"><input type="text" name="email" value="@163.com"/></td>
                </tr>
                <tr>
                    <td align="right">密码:</td>
                    <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码:</td>
                    <td align="left"><input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td>
                </tr>
                <tr>
                    <td align="right">上传照片:</td>
                    <td align="left"><input type="file"/></td>
                </tr>
                <tr>
                    <td align="right">性别:</td>
                    <td align="left">男<input type="radio" name="sex" value="man" checked/>
                        女<input type="radio" name="sex" value="woman"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">爱好:</td>
                    <td align="left">读书:<input type="checkbox" name="dx1" value="read" checked/>
                        跳舞:<input type="checkbox" name="dx1" value="dance"/>
                        唱歌:<input type="checkbox" name="dx1" value="sing"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">城市:</td>
                    <td align="left">
                        <select name="city">
                            <option value="xz" selected>--请选择--</option>
                            <option value="beijing">北京</option>
                            <option value="tianjin">天津</option>
                            <option value="hebei">河北</option>
                            <option value="shanghai">上海</option>
                            <option value="fujian">福建</option>
                            <option value="xiamen">厦门</option>
                            <option value="guangdong">广东</option>
                        </select>
                        <select name="city" size="5" multiple>
                            <option value="xz" selected>--请选择--</option>
                            <optgroup label="华北">
                            <option value="beijing" selected>北京</option>
                            <option value="tianjin">天津</option>
                            <option value="hebei">河北</option>
                            </optgroup>
                            <optgroup label="华东">
                            <option value="shanghai">上海</option>
                            <option value="fujian">福建</option>
                            <option value="xiamen">厦门</option>
                            <option value="guangdong">广东</option>
                            </optgroup>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">简介:</td>
                    <td align="left"><textarea name="jj" rows="6" cols="50" placeholder="请输入个人介绍"></textarea></td>
                </tr>
                <tr>
                    <td align="center" colspan="2"><input type="button" value="来点我" name="button"/>
                        <input type="submit" value="submit" name="submit"/>
                        <input type="reset" value="reset" name="reset"/>
                        <input type="image" name="image_button" src="image-button.png"/></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="hidden" value="这是一个用户注册信息"/></td>
                    <td></td>
                </tr>
                
            </table>
        </form>
    </body>
</html>

<form>标签属性值:

属性描述
actionURL提交表单时向何处发送表单数据
methodget、post设置表单以何种方式发送到指定页面
nameform_name表单的名称
target_blank、_self、_parent、_top在何处打开action URL
enctype1.application/x-www-form-urlencoded 2.multipart/form-data 3.text/plain在发送表单数据之前如何对其进行编码

get:使用URL传递参数,对所发送信息的数量也有限制,一般用于信息获取,保密性差

post:表单数据作为HTTP请求体的一部分,对所发送信息的数量无限制,一般用于修改服务器上的资源

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值