2前端学习-h5body下

1表单<form></form>

总结

1<input/>

1设初始值type-text、value

<P>

            姓氏：

            <input name="lname" value="张" type="text"/></P>

        <P>

2单选type-radio、checked

<form method="post" action="">

    性别：

    <input name="gen" type="radio" class="input" value="男" checked/>男

    <input name="gen" type="radio" value="女" class="input"/>女

</form>

3复选框type="checkbox" 

<form method="post" action="">

    爱好：

    <input type="checkbox" name="interest" value="sports" checked />运动

    <input type="checkbox" name="interest" value="talk"/> 聊天

    <input type="checkbox" name="interest" value="play"/> 玩游戏

</form>

4下拉列表<select><option></option></select>

size="4" maxlength="4"

<form  method="post" action="">

出生日期:

  <input name="byear" value="yyyy" size="4" maxlength="4"/> 年

  <select name="bmon" >

      <option value="">[选择月份]</OPTION>

      <option value="1">一月</option>

      <option value="2">二月</option>

      <option value="3">三月</option>

      <option value="4">四月</option>

      <option value="5">五月</option>

      <option value="6">六月</option>

      <option value="7">七月</option>

      <option value="8">八月</option>

      <option value="9">九月</option>

      <option value="10" selected>十月</option>

      <option value="11">十一月</option>

      <option value="12">十二月</option>

  </select> 月

  <input name="bday" value="dd" size="2" maxlength="2" /> 日

</form>

5按钮type-1~4和点击事件onclick

text,password,butReset,butSubmit,butButton

<form method="get" action="">

    <p>用户名：<input name="name" type="text"/></p>

    <P>密码：<input name="pass" type="password"/></P>

    <p>

        <input type="reset" name="butReset" value="reset按钮"/>

        <input type="submit" name="butSubmit" value="submit按钮"/>

        <input type="button" name="butButton" value="button按钮" onclick="alert(this.value)"/>

        <!--<input  type="image"  src="images/login.gif" />-->

    </p>

</form>

6文本域<textarea ></textarea>

<form method="post" action="">

    <h4>填写个人评价 </h4>

    <P>

  <textarea name="textarea" cols="40" rows="6">

     自信、活泼、善于思考...

  </textarea>

    </P>

</form>

7文件阈type-file

<form action="" method="post" enctype="multipart/form-data">

    <p>

        <input type="file" name="files"/><br/>

        <input type="submit" name="upload" value="上传"/>

    </p>

</form>

8邮箱typeemail

<form action="#" method="post">

    <p>

        邮箱：

        <input type="email" name="eamil"/>

    </p>

    <input type="submit"/>

</form>

9网址type-url

<form action="#" method="post">

    <p>

        请输入你的网址：

        <input type="url" name="userUrl"/>

    </p>

    <input type="submit"/>

</form>

10数字type-number--范围控制

<form action="#" method="post">

    <p>

        请输入数字：

        <input type="number" name="num" min="0" max="100" step="10"/>

    </p>

    <input type="submit"/>

</form>

11滑块type-range

<form action="#" method="post">

    <p>

        请输入数字：

        <input type="range" name="range1" min="0" max="10" step="2"/>

    </p>

    <input type="submit"/>

</form>

12搜索框type-search

<form action="#" method="post">

    <p>

        请输入搜索的关键词：

        <input type="search" name="sousuo" />

        <input type="submit" value="Go"/>

    </p>

</form>

高级应用

13隐藏域？

和数据库的主键有关，用户不需要知道

<form action="" method="get">

    <P>用户名：<input name="name" type="text"></P>

    <P>密码：<input name="pass" type="password"></P>

    <p><input type="submit" value="提交"></p>

    <p><input type="hidden" value="666" name="userid"></p>

</form>

输入提交后效果

14只读与禁用readonly、disabled

<form action="" method="get">

    <P>用户名：<input name="name" type="text" value="张三" readonly></P>

    <P>密码：<input name="pass" type="password"></P>

    <p><input type="submit" value="修改" disabled></p>

</form>

15标签-选项文字也能点击-<label></label>

<label for="female">女</label>

<form>

    请选择性别：

    <label for="male">男</label>

    <input type="radio" name="gender" id="male"/>

    <label for="female">女</label>

    <input type="radio" name="gender" id="female"/>

</form>

表单初级验证

16placeholder位置占用灰色提示

<form action="#" method="post">

    <p>

        请输入搜索的关键词：

        <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

        <input type="submit" value="Go"/>

    </p>

</form>

17required--不能为空

<form action="#" method="post">

    <p>

        用户名：

        <input type="text" name="username"  required/>

        <input type="submit" value="提交"/>

    </p>

</form>

18pattern---按要求输入

按正则表达式意义的要求输入

<form action="#" method="post">

    <p>

        电话号码：

        <input type="text" name="tel"  required pattern="^1[358]\d{9}" />   *以13、15、18开头的11位数字 <br/>

        <input type="submit" value="提交"/>

    </p>

</form>