美文网首页
HTML-表单form-2018.07.05

HTML-表单form-2018.07.05

作者: 侯小强2018 | 来源:发表于2018-07-06 12:37 被阅读0次

HTML表单学习整理

重点:记住命令单词

难点:要有基本的自己的表单样式的逻辑

form标签基本框架格式:

<form action="    " method="get" 或者 method="post">
    用户名:<input type="text" name="   "   value="   "或者placeholder="  ">
    <br/>
    密 码:<input type="password" name="  " value="   "或者placeholder="  "  >
    <br/>
    <input type="submit" name=" ">
</form>

基本框架显示如图:

新手实现最基本功能

小白解释:

  • action 指的是如果用户提交后,基本信息提交的位置,可以选择网址,也可以选择本地的服务中的文件,都会在地址栏中打开显示。
  • method 可以选择两个,get和post。 get代表可以显示输入的文本密码等信息,post代表不显示输入的文本密码等信息。一般处于用户的保护,都会选择post功能。

form新增功能:

  • 单选按钮(Radio Buttons)

属性:type="radio" 后面跟着其他属性
<form>  
    性别:<input type="radio" name="sex" value="male" checked="checked" />男

    <input type="radio" name="sex" value="female"/>女
</form>
如图显示:
单选按钮选项设置完成
  • 复选按钮(Checkboxes)

<form>兴趣爱好
<input type="checkbox" name="chg" value=""> 唱歌
<input type="checkbox" name="yy" value=""> 游泳
<input type="checkbox" name="tw" value=""> 跳舞
</form>
如图显示:
复选框兴趣爱好显示
  • 下拉选项列表<select>

  • 默认选项<selected="selected">表示默认选中;option 定义下拉列表中的选项

<form>
    <select name="city">
        <option value="shanghai" selected="selected"> 上海</option>
        <option value="shangh"> 北京</option>
        <option value="shaai"> 常州</option>
    </select>   
</form>
如图显示:
默认选中上海
  • value"名称" 和placeholder“名称”的区别

value 输入后显示的是黑色字体,将文字输入后默认的名字不会删除,需要手动删除
placeholder 输入后显示的是灰色的字体,光标点击后,可以直接输入文本,基本上现在的网页上都使用这种标签登录用户名和密码。

用户名:<input type="text" name="user"  value="aa" >
            <br> 
            密码:<input type="password" name="psword" placeholder="在此输入密码" >
value和placeholser输入后的不同形式对比
  • 提交 (submit)

将属性输入为submit时,系统会自动变成提交字样的,想改变文字,用value进行更名。

<form>不同结果显示:
    <input type="submit" >
    <input type="submit" value="登录" 
</form>
如图显示:
默认为提交可更改为登录
  • 隐藏域

如果设置了hidden后,网页的action中不会显示提交的信息,但是查看源代码可以看到。

<form>
    <input type="hidden" name="222" value="333" >
</form>

综合练习实例,

一个是用form做,一个是form中套用了table,这样格式对齐的比较规整。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>这是实际操作的两个案例</title>

        <style type="text/css">

        </style>
    </head>

    <body>
        <form action="http://www.baidu.com" method="post">

            用户名:<input type="text" name="user" value="在此输入用户名">
            <br> 密码:
            <input type="password" name="psword" placeholder="在此输入密码">

            <br/> 性别:

            <input type="radio" name="sex" value="male" checked="checked" />男

            <input type="radio" name="sex" value="female" />女

            <br/> 兴趣爱好:

            <input type="checkbox" name="chg" value="changge"> 唱歌
            <input type="checkbox" name="yy" value="youyong"> 游泳
            <input type="checkbox" name="tw" value="tiaowu"> 跳舞
            <br/>
            <select name="city">
                <option value="shanghai" selected="selected"> 上海</option>
                <option value="beijing"> 北京</option>
                <option value="cahngzhou"> 常州</option>
            </select>
            <input type="submit" value="登录" align="right">

        </form>

        <hr/>
        <hr/>

        <!--    
    时间:2018-07-06
    描述:第二个表格,尝试用table做
-->
        <form action="http://www.baidu.com" method="post" style="float: left;align-content: center;">
            <table>
                <tr>
                    <td align="left"> <input type="text" name="uername" placeholder="用户名/手机号/邮箱"></td>

                </tr>

                <tr>
                    <td align="left"> <input type="password" placeholder="在此输入密码"></td>
                </tr>

                <tr>
                    <td align="left"> 性别: <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex" checked="checked">女</td>
                </tr>

                <tr>
                    <td>兴趣爱好:<input type="checkbox">游泳<input type="checkbox">跳舞 <input type="checkbox">唱歌</td>
                    <td> </td>
                    <td> </td>
                </tr>
                <tr>
                    <select name="city">
                        <option value="shanghai" selected="selected"> 上海</option>
                        <option value="beijing"> 北京</option>
                        <option value="cahngzhou"> 常州</option>
                    </select>
                </tr>
                <input type="hidden" name="222" value="333">

                <tr>
                    <td colspan="3" align="center">
                        <input type="submit" value="登录" "></td>
                </tr>       
            </table>
        </form>
    </body>
</html>
如图显示:
两个表格显示

学习体验:

其实很多东西都是孰能生巧,慢慢的每天多会一点,就可以结合起来做出自己想要的效果!加油,侯小强!!!

未解决疑问:用table进行插入select时候,总是跳到第一行,百度没有找到解决办法!!!

问题找到啦,因为select 放在tr里面,但是少了一对td 所以会直接跳到上面一行!!!!

正确代码如下
<tr>
    <td>
    <select name="city">
        <option value="shanghai" selected="selected"> 上海</option>
        <option value="beijing"> 北京</option>
        <option value="cahngzhou"> 常州</option>
    </select>
    </td>
</tr>
修改之后的表格

相关文章

  • HTML-表单form-2018.07.05

    HTML表单学习整理 重点:记住命令单词 难点:要有基本的自己的表单样式的逻辑 form标签基本框架格式: 基本框...

  • html-表单

    功能 表单用于向服务器传输数据,实现web与服务器的交互 表单能够包含input系列标签,比如文本字段、复选框、单...

  • HTML-表单

    一、表单介绍 二、控件的常用属性 三、表单的其他控件

  • HTML-表单

    概述: 标签用于为用户输入创建 HTML 表单. 表单用于向服务器传输数据. 表单能够包含input 元素,比如文...

  • HTML-表单(form)

    表单用于搜集不同类型的用户输入。即是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。...

  • 六 HTML-表单

    一、表单概述 1、作用: 用于为用户创建 HTML 表单,用于向服务器传输数据。 表单能够包含 input 元素,...

  • html-图片/表格/表单

    a标签的认识 ’#‘号跳转页面内锚点跳转外部网页跳转内部网页 a标签的伪协议 img的认识 img是一个单标签 ...

  • HTML-表单综合练习

    本章用table进行布局和升级

  • H5竖屏模板

    【html-头部】 【html-内容区】 为了...

  • html-表单的理解与使用

网友评论

      本文标题:HTML-表单form-2018.07.05

      本文链接:https://www.haomeiwen.com/subject/vtyjuftx.html