HTML-form表单

爱康代码

已于 2022-09-19 09:25:57 修改

阅读量1.9k

点赞数 4

分类专栏： html 文章标签： html 前端

于 2022-09-19 08:44:05 首次发布

本文链接：https://blog.csdn.net/weixin_63003502/article/details/126926460

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、效果展示

二、知识点储备

form标签就是表单
input type=text 是文件输入框 value设置默认显示内容
input type-password 是密码输入框 value设置献认显示内容
input type-radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type-reset 是重置按钮 value属性修改按钮上的文本
input type=submit 是提交按钮 value属性修改按钮上的文本
input type=button 是按钮 value属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用
select标签是下拉列表框 option标签是下拉列表框中的选项selected="selected"设置默认选中
textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值). rows属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度

三、我知道你会了，实战起飞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form >
    用户名：<input type="text" value="默认值"/><br/>
    密码：<input type="password" value="123"/><br>
    确认密码：<input type="password"  value="123"/><br>
    性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex" checked = "checked" />女<br>
    兴趣爱好：<input type="checkbox" checked = "checked" />唱、跳、rap <input type="checkbox" />打篮球 <br>
    国籍：<select >
  <option >---请选择省份----</option>
  <option selected="selected">山东</option>
  <option >江苏</option>
  <option >河北</option>
        </select> <br>
  自我评价: <textarea rows="10" cols="20">点个赞吧！（我是默认值）</textarea> <br/>
  <input type= "reset" value="abc" />
  <input type="submit"/>
  <input type="file" />
  <input type="hidden" />
</form>
</body>
</html>

四、你的效果展示太丑了吧！

行，这个总算整齐了吧！

这样比较工整的显示只需要将表单代码信息放到表格中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                 <input type="checkbox" checked="checked"/>唱
        <input type="checkbox"/>跳
        <input type="checkbox"/>rap
        <input type="checkbox"/>篮球
      </td>
    </tr>
    <tr>
      <td>省份：</td>
      <td>
        <select>
          <option>---请选择省份---</option>
          <option selected="selected">山东</option>
          <option>河北</option>
          <option>江苏</option>
        </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td align="center"><input type="reset"/></td>
            <td align="center"><input type="submit"/></td>
            <td><input type="hidden" name="admin" value="admin"/></td>
        </tr>
    </table>
</form>
</body>
</html>

五、表单提交细节

知识点添加：

form标签中：
action属性设置提交的服务器地址
method属性设置提交的方式GET（默认值）或post

表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性
2、单选、复选、下拉列表中的option标签，都要添加value属性，以便发给服务器
3、表单项不在提交的form标签中

get和post提交：