html 表单的基本使用

最新推荐文章于 2021-07-02 14:59:11 发布

master_ning

最新推荐文章于 2021-07-02 14:59:11 发布

阅读量282

点赞数 1

分类专栏： html 文章标签：表单 html 注册

本文链接：https://blog.csdn.net/master_ning/article/details/79660307

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天写一个简单的注册信息的表单，样式如图：

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  form div { 
 
 
  margin: 
  20px; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 

 
  <!-- 
 
 
   上传数据的方式 
 
 
   get 把参数拼接到url的后面 缺点 :1数据全部暴露 不安全 2url长度有限的 
 
 
   post 安全 
 
 
   --> 
 

 
  <!-- action 是数据要提交到的地址 --> 
 
 
  <!--'name:xiaoming 
 
 
   psw:123456 
 
 
   hobby: chi 
 
 
   key:value 
 
 
   '--> 
 

 
  < 
  form 
  action= 
  "http://www.baidu.cn" 
  method= 
  "post" 
  > 
 
 
  <!--name属性 指定上传数据的key的名字--> 
 
 
  < 
  div 
  > 
 
 
  <!--label可以把文字和输入框关联,点击文字输入框就会有焦点 --> 
 
 
  < 
  label 
  for= 
  "username" 
  >姓名: 
  </ 
  label 
  > 
 
 
  < 
  input 
  type= 
  "text" 
  name= 
  "name" 
  id= 
  "username" 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  label 
  for= 
  "psw" 
  >密码: 
  </ 
  label 
  > 
 
 
  <!--注意type--> 
 
 
  < 
  input 
  type= 
  "password" 
  name= 
  "password" 
  id= 
  "psw" 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 

   性别: 
 
 
  <!--name值相同 才能单选 
 
 
   value是上传的值 
 
 
   这里用0代表男 
 
 
   1代表女 
 
 
   --> 
 
 
  < 
  input 
  type= 
  "radio" 
  name= 
  "gender" 
  value= 
  "0" 
  >男 
 
 
  < 
  input 
  type= 
  "radio" 
  name= 
  "gender" 
  value= 
  "1" 
  >女 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 

   爱好: 
 
 
  < 
  input 
  type= 
  "checkbox" 
  name= 
  "hobby" 
  value= 
  "sing" 
  >唱歌 
 
 
  < 
  input 
  type= 
  "checkbox" 
  name= 
  "hobby" 
  value= 
  "run" 
  >跑步 
 
 
  < 
  input 
  type= 
  "checkbox" 
  name= 
  "hobby" 
  value= 
  "swing" 
  >游泳 
 
 
  < 
  input 
  type= 
  "checkbox" 
  name= 
  "hobby" 
  value= 
  "study" 
  >学习 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 

   照片: 
 
 
  < 
  input 
  type= 
  "file" 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 

   个人描述 
 
 
  <!--cols初始的时候的列的数量 
 
 
   rows初始的时候的行的数量 
 
 
   --> 
 
 
  < 
  textarea 
  name= 
  "desc" 
  id= 
  "" 
  cols= 
  "30" 
  rows= 
  "10" 
  > 
 
 
 
 
  </ 
  textarea 
  > 
 
 
  </ 
  div 
  > 
 

 
  < 
  div 
  > 
 

   籍贯: 
 
 
  <!--select标签的value值 就是下面选中的option的value值--> 
 
 
  < 
  select 
  name= 
  "loc" 
  id= 
  "" 
  value= 
  '' 
  > 
 
 
  < 
  option 
  value= 
  "0" 
  >北京 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "1" 
  >上海 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "2" 
  >广州 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "3" 
  >深圳 
  </ 
  option 
  > 
 
 
  </ 
  select 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  input 
  type= 
  "submit" 
  value= 
  "注册" 
  > 
 
 
  < 
  input 
  type= 
  "reset" 
  value= 
  "重置" 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  form 
  > 
 

 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 