2019-10-24 表单标签

作者: 任地狱丶 | 来源:发表于2019-10-24 19:08 被阅读0次

2019-10-24 表单标签
HTML表单、按钮、下拉菜单基础
Day22—HTML和CSS
day22-表单和css基础
二阶段002day 部分html和css
html与css
htm day2 总结
【第四天】03-HTML的内容标签笔记（下）
22总 HTML和css
## HTML基础-表单标签

今天学习了html表单

HTML表单（<form></form>标签）

属性：

1 action：决定表单提交的地址。
2 method:指定提交表单的方式

* get：

1.请求参数会在地址栏中显示。
2.请求参数大小是有限制的。
3.不太安全。

* post：

1.请求参数不会再地址栏中显示。
2.请求参数的大小没有限制。
3.较为安全。

<input>标签：用于输入其type属性决定其作用。

text ：文本框。用于让用户输入信息。 placeholder的用法是在文本框为空时提示用户

<input name="用户名"  placeholder="请输入用户名">

password:密码框

<input name="密码" type="password" placeholder="请输入密码">

3.radio：单选框 name属性值相同的单选框则为一组 checked属性指定初始被选中的单选框

<label><input name="性别" type="radio" value="男" checked="checked">男</label>
<label><input name="性别" type="radio" value="女">女</label>

4.file:文件选择框，用于上传文件。

<input type="file" name="文件" id="文件"  />

5.复选框标签<checkbox>

<input name="爱好" type="checkbox" value="玩游戏">玩游戏
<input name="爱好" type="checkbox" value="气味儿">气味儿
<input name="爱好" type="checkbox" value="阿萨德">阿萨德

下拉列表<select>

select必须配合子标签<option>使用，用于制作下拉列表

                <select name="籍贯">
                    <option value="北京">北京</option>
                    <option value="qwe京">qwe</option>
                    <option value="asd">asd</option>
                    <option value="zxc京">zxc</option>
                    <option value="gd京">gf京</option>
                    <option value="北fsadasdsa京">北fdsadsad京</option>
                    <option value="北qweqwewqd京">北wqeqwewq京</option>
                    <option value="北aasd京">北aasd京</option>
                </select>

HTML5新增的类型

取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"> <br>
生日：<input type="datetime-local" name="birthday"> <br>
邮箱：<input type="email" name="email"> <br>
年龄：<input type="number" name="age"> <br>

textarea：文本域

            * cols：指定列数，每一行有多少个字符
            * rows：默认多少行。

下面是我使用表格佳航表单标签做出来的注册界面

先上代码⑧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body background="imgx/regist_bg.jpg">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        
        <form>
        <table border="3px" bordercolor="grey" width="80%" align="center" cellspacing="0px" cellpadding="5px">
            <tr>
                <td>用户名</td>
                <td><input name="用户名"  placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="密码" type="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input name="确认密码" type="password"></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td><input name="邮箱" type="email"></td>
            </tr>
            <tr>
                <td>颜色</td>
                <td><input name="颜色" type="color"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input name="性别" type="radio" checked="checked" value="男">男<input name="性别" type="radio" value="女">女</td>
            </tr>
            <tr>
                <td>爱好</td>
                <td><input name="爱好" type="checkbox" value="玩游戏">玩游戏<input name="爱好" type="checkbox" value="气味儿">气味儿
                <input name="爱好" type="checkbox" value="阿萨德">阿萨德</td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td><select name="籍贯">
                    <option value="北京">北京</option>
                    <option value="qwe京">qwe</option>
                    <option value="asd">asd</option>
                    <option value="zxc京">zxc</option>
                    <option value="gd京">gf京</option>
                    <option value="北fsadasdsa京">北fdsadsad京</option>
                    <option value="北qweqwewqd京">北wqeqwewq京</option>
                    <option value="北aasd京">北aasd京</option>
                </select></td>
            </tr>
            <tr>
                <td>头像</td>
                <td><input name="头像" type="file"></td>
            </tr>
            <tr>
                <td>简介</td>
                <td><textarea name="简介" cols="20" rows="4">我是：</textarea></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input name="生日" type="datetime-local"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" name="提交"><input type="reset" name="重置"></td>
                
            </tr>
            
        </table>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body background="imgx/regist_bg.jpg">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

    <form>
    <table border="3px" bordercolor="grey" width="80%" align="center" cellspacing="0px" cellpadding="5px">
        <tr>
            <td>用户名</td>
            <td><input name="用户名"  placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input name="密码" type="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input name="确认密码" type="password"></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input name="邮箱" type="email"></td>
        </tr>
        <tr>
            <td>颜色</td>
            <td><input name="颜色" type="color"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input name="性别" type="radio" checked="checked" value="男">男<input name="性别" type="radio" value="女">女</td>
        </tr>
        <tr>
            <td>爱好</td>
            <td><input name="爱好" type="checkbox" value="玩游戏">玩游戏<input name="爱好" type="checkbox" value="气味儿">气味儿
            <input name="爱好" type="checkbox" value="阿萨德">阿萨德</td>
        </tr>
        <tr>
            <td>籍贯</td>
            <td><select name="籍贯">
                <option value="北京">北京</option>
                <option value="qwe京">qwe</option>
                <option value="asd">asd</option>
                <option value="zxc京">zxc</option>
                <option value="gd京">gf京</option>
                <option value="北fsadasdsa京">北fdsadsad京</option>
                <option value="北qweqwewqd京">北wqeqwewq京</option>
                <option value="北aasd京">北aasd京</option>
            </select></td>
        </tr>
        <tr>
            <td>头像</td>
            <td><input name="头像" type="file"></td>
        </tr>
        <tr>
            <td>简介</td>
            <td><textarea name="简介" cols="20" rows="4">我是：</textarea></td>
        </tr>
        <tr>
            <td>生日</td>
            <td><input name="生日" type="datetime-local"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" name="提交"><input type="reset" name="重置"></td>
            
        </tr>
        
    </table>
    </form>
</body>

</html>
背景图片在下面自取：

regist_bg.jpg

最后的效果如下

QQ截图20191024190004.jpg

2019-10-24 表单标签
今天学习了html表单 HTML表单（
标签）属性： 1 action：决定表单提交的地...
HTML表单、按钮、下拉菜单基础
1.表单标签表单标签（form）表单标签的作用：用来收集与用户信息 - 实质是将表单标签作为容器，收集表单标签中...
Day22—HTML和CSS
1 表单标签和input标签 1.1 表单标签表单标签：form标签，表单标签是用来收集用户信息的，是一个容...
day22-表单和css基础
1 表单标签和input标签 1.1表单标签（form）表单标签的作用：收集用户信息。-实质是将表单标签作为容器...
二阶段002day 部分html和css
1.表单标签和input标签 -1.表单标签(form)表单标签的作用：收集用户信息。 - 实质是将表单标签作为容...
html与css
1.表单标签和input标签 1.表单标签（form）表单标签的作用是用来收集用户信息，实质是将表单标签作为容器...
htm day2 总结
1.表单标签(form)表单标签的作用：收集用户信息。 - 实质是将表单标签作为容器，来收集表单标签中其他标签的信...
【第四天】03-HTML的内容标签笔记（下）
1.1表单标签 1.1.1Form标签 Form标签，表单的域标签，用于包裹整个表单的内容。表单就是用户提交数据...
22总 HTML和css
1.表单标签： 1.表单标签:form标签表单标签是用来收集用户信息的...
## HTML基础-表单标签
## HTML基础-表单标签 # form标签(表单) #datalist标签 # select标签 # optg...