HTML+CSS第三章总结

表单

• 文本框：<input type="text" name=“文本框”/>
• 密码框：<input type="password" name=“密码框”/>
• 隐藏域：<input type="hidden" name=“你看不见我”/>
• 邮箱：<input type="email" name="邮箱"/>
• 只读：<input name="你不能改" type="text" value="张三" readonly>
• 禁用：<input type="你不能按 value="修改" disabled>
• 单选按钮：

<form method="post" action="">
    性别：
    <input name="gen" type="radio" class="input" value="男" checked/>男
    <input name="gen" type="radio" value="女" class="input"/>女
</form>

• 复选框：

<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>

• 下拉列表框：加selected代表默认否则默认第一个

<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>

• 按钮：

<form method="get" action="">
    <p>
        <input type="reset" name="butReset" value="重置t按钮"/>
        <input type="submit" name="butSubmit" value="提交按钮"/>
        <input type="button" name="butButton" value=”普通按钮" onclick="alert(this.value)"/>
        <!--<input  type="image"  src="images/login.gif" />-->
    </p>
</form>

• 文本域：

<form method="post" action="">
    <P>
  <textarea name="textarea" cols="40" rows="6">
     自信、活泼、善于思考...
  </textarea>
    </P>
</form>

• 上传文件：

<form action="" method="post" enctype="multipart/form-data">
    <p>
        <input type="file" name="files"/><br/>
        <input type="submit" name="upload" value="上传"/>
    </p>
</form>

• 上传文件：

<form action="" method="post" enctype="multipart/form-data">
    <p>
        <input type="file" name="files"/><br/>
        <input type="submit" name="upload" value="上传"/>
    </p>
</form>

• 打开网址：

<form action="#" method="post">
    <p>
        请输入你的网址：
        <input type="url" name="userUrl"/>
    </p>
    <input type="submit"/>
</form>

• 数字及其加减按钮：

<form action="#" method="post">
    <p>
        请输入数字：
        <input type="number" name="num" min="0" max="100" step="10"/>
    </p>
    <input type="submit"/>
</form>

-滑块：

<form action="#" method="post">
    <p>
        <input type="range" name="range1" min="0" max="10" step="2"/>
    </p>
</form>

-搜索框：

<form action="#" method="post">
    <p>
        请输入搜索的关键词：
        <input type="search" name="sousuo" />
        <input type="submit" value="Go"/>
    </p>
</form>

-表单的验证：

• placeholder：当文本框中无内容时提示语显示

<form action="#" method="post">
    <p>
        请输入搜索的关键词：
        <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
        <input type="submit" value="Go"/>
    </p>
</form>

• required：规定文本框填写内容不能为空，否则不允许用户提交表单

<form action="#" method="post">
    <p>
        用户名：
        <input type="text" name="username"  required/>
        <input type="submit" value="提交"/>
    </p>
</form>

• pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<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>