博客

用表单做一个收集信息页面

  • Post author:
  • Post category:其他


今天和大家分享一下怎么用表单来做一个收集信息的页面

在做之前我们要先来了解一下和表单有关的知识点

类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）
password 定义密码框
checkbox 定义多选框
file 定义文件上传
reset 定义重置按钮
select 定义下拉选框
textarea 定义多行文本
button 定义按钮

接下来我们一起来了解一下这些类型都有哪些属性

1.文本框 

<input type="text" value="值" placeholder="提示文本" name="名称" disabled="disabled">

2.密码框 

<input type="password" value="值" placeholder="提示文本" name="名称">

3.单选 

<input type="radio" checked="checked" name="名称"/>

4.多选 

<input type="checkbox" checked="checked" name="名称"/>

5.下拉 

<select>
   <option>选项1</option>
   <option selected="selected">选项2</option>
</select>

6.文件上传 

<input type="file"/>

7.多行文本 

<textarea cols="列" rows="行">
</textarea>

8.提交按钮 

<input type="submit" value="上传信息"/>
<button type="submit">上传信息"</button>

9.重置按钮 

<input type="reset" value="擦掉重写"/>
<button type="reset">擦掉重写"</button>

10.标签 

<label><input type="checkbox"/>看书</label>
<label><input type="radio"/>男</label>

相信大家对表单都有一定的了解了接下来我们要一步步的写出来一个收集信息的页面 

<body>
   <div class="f">我的基本信息</div><br />
   <span class="head">填写您的个人信息</span>
   <div class="one">
       <div class="ding">
       <form action="">
           真实姓名：<input type="text" style="width: 145px; height: 30px;">
           <select name="" id="">
               <option value="">女士</option>
               <option value="">男士</option>
           </select><br /><br />
           电子邮箱：<input type="text" style="width: 200px; height: 30px;"><br /><br />
           身份证号：<input type="text" style="width: 200px; height: 30px;"><br /><br />
           出生日期：<select name="" id="sui" >
                           <option value="">请选择年</option>
                           <option value="">xx</option>
                    </select>
                    <select name="" id="sui">
                       <option value="">1月</option>
                       <option value="">xx</option>
                    </select>
                    <select name="" id="sui">
                       <option value="">1日</option>
                       <option value="">xx</option>
                    </select><br /><br />
       </div>
       <span class="zhong">请填写您的联系地址</span><br />
       <div class="shen">
       省份及市县区：<select name="" id="di">
                       <option value="">请选择省份</option>
                       <option value="">xx</option>
                    </select>
                    <select name="" id="di">
                       <option value="">请选择市</option>
                       <option value="">xx</option>
                    </select>
                    <select name="" id="di">
                       <option value="">请选择区</option>
                       <option value="">xx</option>
                    </select><br /><br />
       &emsp;&emsp;详细地址：<input type="text" style="width: 377px; height: 30px;"><br /><br />
       &emsp;&emsp;邮政编码：<input type="text" style="width: 62px; height: 30px;"><br /><br />
       </div>
       <span class="zhong">请填写您的联系信息</span><br />
       <div class="wei">
           联系电话：<input type="text" value="区号" style="width: 55px; height: 30px;">
                    <input type="text" value="电话" style="width: 130px; height: 30px;">
                    <input type="text" value="分机" style="width: 55px; height: 30px;"><br /><br />
          *移动电话：<input type="text" value="区号" style="width: 200px; height: 30px;"><br /><br />
          <button onclick="alert('注册成功')" style="width: 113px; height: 27px; background-color: #d32402;" >保存基本信息</button>
       </form>
   </div>
   </div>
</body>

写出来的页面如下图所示：

在这里插入图片描述

和表单有关的知识点就分享到这了 看在小编整理不易希望各位看官能够一键三连


版权声明：本文为weixin_43910264原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。