今日编程

今天继续学习了html的一些基础知识。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  
  <title>表单</title>
 </head>
 <body>
     <!--
       1.表单的作用？
       收集用户信息，表单展现，用户填写表单，然后提交给服务器
       2.如何画一个表单
       使用form标签画表单
       3.一个网页可以有多个表单
       4.表单需要提交数据给服务器,form标签有一个action属性，用来指定服务器地址
         action属性用来指定服务器提交给那个服务器。
         action属性与超链接中href属性一样，都向服务器发出请求request
       5.
     -->
    <form action="">
       <!--画一个提交按钮，可以提交表单-->
       <!--画按钮可以使用input输入域，type="submit"表示该按钮是一个提交按钮具有提交表单的能力-->
        <input type="submit" value="登录"/> 
        <input type="button" value="设置按钮显示的文本">
        <!--对于按钮来说，按钮的value属性用来指定按钮上的文本信息-->
    </form>
    <form action="https://www.baidu.com">
    <!--与超链接相比，可以进行数据的收集
    虽然两者都可以向服务器发生请求
    -->
     <input type="submit" value="百度"/> 
      

    </form>
    <form action="">
        用户名<input type="text" />
        <br>
        密码<input type="password"/>
        <br>
        <input type="submit" value="登录"/>
    </form>



    <table border="1">
    <tr>
        <td>用户名</td>
        <td><input type="text"/></td>
        
     </tr>
     <tr>
        <td>密码</td>
        <td><input type="password"/></td>
     </tr>
    
     <tr align="center">
        <td colspan="2"><input type="submit" value="登录"/></td>

     </tr>
</table>




<!--
表单是以什么格式提交给服务器
file:///E:/html/localhost?username=15132008994&userpwd=3e242112
格式: action?name=value&name=value
http协议规定的，必须以此格式提交
不用自己写value，此项由用户提交，文本框与密码框

表单写了name属性的，一律提交给服务器，不想提交不写name


文本框与密码框的value不用自己写
value啥也没写，value默认值为空字符串""
-->
<form action="localhost">
<table>
    <tr>
        <td>用户名</td>
        <td><input type="text" name="username"/></td>
        
     </tr>
     <tr>
        <td>密码</td>
        <td><input type="password" name="userpwd"/></td>
     </tr>
    
     <tr align="center">
        <td colspan="2"><input type="submit" value="登录"/>
        <!--要合并单元格-->
         <input type="reset" value="清空"/>
         <!--reset表示清空表单中的数据-->
        </td>
        
     </tr>
</table>
</form>

 </body>
</html>
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>用户注册表单</title>
 </head>
 <body>
 <!--
 超链接提交的数据固定不变
 只能是get请求
 -->
  <!--提交的是name和value-->
       <form action="" method="post">
       <!--
       form表单中method属性
       get(默认):用户提交信息显示在地址栏
       post:信息隐藏
       
       -->
       <table border="0">
       <tr>
        <td align="center">用户名</td>
        <td colspan="6"><input type="text" name="username"/></td>
       </tr>
        <br>
        <tr>
        <td align="center">密码</td>
        <td colspan="6"><input type="password" name="userpwd"/></td>
        </tr>
        <br>
        <tr>
        <td align="center">确认密码</td>
        <td colspan="6"><input type="password"/></td>
 <!--确认密码不需要加name，浏览器会自动比较
 确认密码<input type="password" name=""/>
 -->    </tr>
        <br>
       <tr>
       <td colspan="7" align="center">性别</td>
       </tr>
       <br>
       <tr>
       <td>男</td><td><input type="radio" name="gender" value="1"/></td>
       <td align="center">女</td><td><input type="radio" name="gender" value="0" checked/></td>
       </tr>
     <!--
      性别<input type="radio" name="gender"/>男
       <input type="radio" name="gender"/>女

       radio代表圆点按钮，
       name一样表示同一组，因此可以单选
       必须加value,且手动指定

        性别<input type="radio" name="gender" checked/>男
        加上checked默认选中
     -->
       <br>
       <tr>
      <td align="center"> 兴趣爱好</td>   <!--<input type="checkbox" name="interest">-->
       <td>自在</td><td><input type="checkbox" name="interest" value="free"/></td>
       <td>喝酒</td><td><input type="checkbox" name="interest" value="drink"/></td>
       <td>学习</td><td><input type="checkbox" name="interest" value="learn"/></td>
       </tr>
       <br>
       <!--type="checkbox" 设置复选框 checked默认选中-->
      <tr>
      <td align="center"> 学历</td>
      <td colspan="6"> <select name="grade">
        <option value="senior">高中</option>
        <option value="junior" >初中</option>
        <option value="universiry" selected>本科</option>
    <!--默认选中用selected-->
    </td>
    </tr>
       </select>
       <br>
       <tr>
       <td align="center">
       简介</td><!--文本域无value属性，用户填写的内容是value-->
       <td colspan="6"><textarea rows="10" cols="35" name="introduce"></textarea></td>
       </tr>
       <br>
       
       <tr><td align="center" colspan="7"><input type="submit" value="注册"/></td></tr>
       </table>
       </form>
 </body>
</html>

明天计划继续学习html.

posted @ 2020-09-25 18:03  好吗，好  阅读(41)  评论(0)    收藏  举报