html--form表单常用操作

最新推荐文章于 2021-06-16 20:47:39 发布

日G一卒

最新推荐文章于 2021-06-16 20:47:39 发布

阅读量489

点赞数

分类专栏： vue前端文章标签： html

本文链接：https://blog.csdn.net/likunpeng6656201/article/details/99704637

版权

vue前端专栏收录该内容

62 篇文章 1 订阅

订阅专栏

form表单

用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中<form action=" " method=" ">
action：提交地址、动作，与input标签中type标签的submit属性相关联。 <input type="submit" value="提交" />，提交地址是action的地址
method:提交方法，有get和post两种提交方法。
get方法：提交数据可以再URL中看见，
例如：
（1）以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数
（2）URL长度有限制，所以传递的参数数据就有限制
（3）由于数据可以看见，所以不安全
（4）网页默认的请求是get

post方法：

将form data 保存在http的请求体
没有长度限制
安全的
往往在开发中用于提交数据form表单提交post
文件上传 method = post enctype=multipart/form-data

input标签：输入框，是表单中最重要的部分
name：指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义
value：文本框的内容，一般用在不能输入的类型中，如改变按钮的名字等。
placeholder：占位内容，通常用于提示：

<input type="text" name="emailId" placeholder="输入账号" />

在这里插入图片描述
readonly：只读模式，设置后无法修改输入框的内容

disabled：禁用状态　
　　在这里插入图片描述
size：由于输入框是单行的，所以只能设置宽度
maxlength：限制输入框最大输入的字符个数

type属性：
text：普通文本，标签的默认属性时text ，通常如输入用户名用的是text
passworld：密文文本，输入的内容不显示。如密码输入框
submit：提交按钮。上文提到过，要与action一起用。
radio：单选框，多个关联选项name属性要一致，需要设置value，默认选中用checked设置
<labke for=""></lable>:用于关联单选按钮与文字。

性别：<input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label>
<input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label><br/>

CheckBox：复选框，属性与单选框类似

爱好：<input type="checkbox" name="like" value="sport" id="1"/><label for="1">运动</label>
            <input type="checkbox" name="like" value="music"id="2"/><label for="2">音乐</label>
            <input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label>
            <input type="checkbox" name="like" value="games" id="5"/><label for="5">游戏</label><br/>

file：文件上传，需要进行配套设置。提交方法需要用post
hidden：隐藏字段，该字段根普通字段一样，但是不会在页面上显示

<input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">

除了输入框外常用的还有下拉选择框和文本域
select：下拉选择框　
属性name需要设置　　　
size：可以设置高度(选项个数)
每个选项都是一个option，必须指定value，默认选中使用属性selected

籍贯：<select name="from">
         <option value="bj">北京</option>
         <option value="sh">上海</option>
         <option value="gz">广州</option>
         <option value="sz">深圳</option>
      </select><br/>

textarea：文本域。
说明：可以输入多行文本
属性：
cols：列数(宽度)
rows：行数(高度)
注意：不要在标签书写任何多余的内容

简介：<textarea name="intro" cols="20" rows="5"></textarea><br/>
            <input type="submit" value="注册"><br/>

例子：

为了对齐方便使用table表格标签来辅助对齐。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body background="timg.jpg">
        <h1>还没有账号？赶紧注册一个吧！</h1>
        <form>
        <table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0">
<tr>
    <td align="right" padding="0">电子邮箱：</td>
    <td align="left" padding><input type="text" name="emil" placeholder="请输入："/><br/></td>
</tr>
<tr>
    <td></td>
    <td>您可以使用<a href="#">邮箱</a>或者<a href="#">手机号</a>注册  <br/></td>
</tr>
<tr>
    <td align="right">创建密码：</td>
    <td><input type="password" name="pwd"></td>
</tr>
<tr>
    <td align="right">真实姓名：</td>
    <td><input type="text" name="name" placeholder="请输入："/></td>
</tr>
<tr>
    <td align="right">性别：</td>
    <td><input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label>
                  <input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label></td>
</tr>
<tr>
    <td align="right">生日：</td>
    <td><input type="date" name="date"/><br/></td>
</tr>
<tr>
    <td align="right">我现在：</td>
    <td><input type="radio" name="work" value="school"/>正在上学
                    <input type="radio" name="work" value="worker"/>已经工作
                    <input type="radio" name="work" value="other"/>其他</td>
</tr>
<tr>
    <td align="right"> 现居地：</td>
    <td><input type="text" name="address" placeholder="请输入："/></td>
</tr>
<tr>
    <td></td>
    <td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服务条款</a></td>
</tr>
<tr>
    <td></td>
    <td><input type="submit" value="立即注册"/></td>
</tr>
        </table>
        </form>

日G一卒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html--form表单常用操作

form表单用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中action：提交地址、动作，与input标签中typy标签的submit属性相关联。，提交地址是action的地址method:提交方法，有get和post两种提交方法。get方法：提交数据可以再URL中看见，例如：（1）以http://reg.email.163.com/unireg/ca...
复制链接

扫一扫

专栏目录