zoukankan      html  css  js  c++  java
  • 网页设计之路(7)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单练习</title>
    </head>

    <body>
    <p>
    表单是一个包含表单元素的区域。
    表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
    表单用表单标签(form)定义。
    </p>
    <form>
    姓名:<input type="text" name="firstname" value="girl"><br /><!--输入文本,注意value,它表示input的默认值,不同的type有不同的用法-->
    密码:<input type="password" name="password"</form><!--这是输入密码,注意格式要对齐,美观-->
    <br />
    <form>
    <input type="radio" name="sex" value="male" />male<!--这里的value是用来表示选择后的input的值-->
    <br />
    <input type="radio", name="sex" value="female" />female<!--注意name的作用,它主要是区分输入标签的,在单选框里,name标签名字必须一样,否则起不到单选框的作用。-->
    </form>
    <br />
    <form >
    <input type="checkbox" name="firstcheck" />apple
    <br />
    <input type="checkbox" name="secondcheck" value="pear"/>pear

    </form>
    <form name="input", action="test1.html" method="post">
    username:
    <input type="text" name="user"/>
    <input type="submit" value="submit" /><!-- 关于输入的数据处理,需要学习asp和php教程.现在需要掌握动作action这个用法-->
    </form>
    <form>
    <select name="cars" ><!--别忘给列表命名-->
    <option value="1">1</option>
    <option value="2" selected="selected">2 </option>
    <option value="3">3</option>
    </select>
    </form>
    <br />
    <form>
    <input type="button" value="face" name="person" />
    </form>
    <textarea name="textarea" cols="10" rows="10">
    we will win
    </textarea>
    <form>
    <fieldset>
    <legend>健康信息</legend><!--定义域的标题-->
    身高:<input type="text" />
    体重:<input type="text" />
    </fieldset>
    <!--fieldset 元素可将表单内的相关元素分组。
    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
    当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
    <fieldset> 标签没有必需的或唯一的属性。
    <legend> 标签为 fieldset 元素定义标题-->
    </form>
    <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"><!--1 method是指定数据如何发送到服务器的一个属性
    2 只可能是post和get post:官方解释是把数据通过post会话传送到服务器。实际就是提交数据。 get:将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;一般用来从服务器得到数据。
    3,默认是get,所以一般我们都要指定为post,get会使输入的值在网站上显示.enctype为编码方式-->


    <h3>这个表单会把电子邮件发送到 W3School。</h3>
    姓名:<br />
    <input type="text" name="name" value="yourname" size="20">
    <br />
    电邮:<br />
    <input type="text" name="mail" value="yourmail" size="20">
    <br />
    内容:<br />
    <input type="text" name="comment" value="yourcomment" size="40"><!--默认长度为20-->
    <br /><br />
    <input type="submit" value="发送">
    <input type="reset" value="重置">

    </form>
    <br />
    <select>
    <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    </optgroup>
    </select><!--通过 <optgroup> 标签把相关的选项组合在一起,注意里面的label标签的使用-->
    <br />
    <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    </form><!--请点击文本标记之一,就可以触发相关控件,注意for与id的对应-->

    </body>
    </html>

    我觉得我应该把例子和注释放在一起,有利于我记忆和复习,这个是表单的练习,觉得很神奇,之前学java也能实现这些功能。所以说一定要多看多练习。

  • 相关阅读:
    jQuery对表单的操作
    js-工厂模式
    js中call、apply、bind的区别
    js实现重载和重写
    js封装/继承/多态
    变量的解构赋值
    var & let & const 的区别
    jQuery之animate中的queue
    jQuery之动画
    .trigger
  • 原文地址:https://www.cnblogs.com/chufengpeng/p/4004135.html
Copyright © 2011-2022 走看看