I. Introduction

1. The HTML5 form function method code in the transformation of the responsive development technology (HTML5+CSS3+Bootstrap) explained in this article is only realized by using the form function, and it cannot realize the successful jump to the information interface after submitting information. This is also a typical case of many textbooks;

2. This article will explain the knowledge points related to 3D conversion, rotation and other functions, and will briefly talk about other aspects;

3. This code is written using visual Studio Code, other software such as DW, HBX, etc. are all available;

4. The running browser is Google, and it is recommended to use Google Chrome;

5. This case is what I told my teacher at school, some parts are not perfect, please forgive me and please enlighten me;

2. Knowledge point explanation and code structure

The knowledge points here will not be explained in detail. If you want to know more about it, you can learn about it in my blog post " Understanding the Functions and Methods of HTML5 Forms Through Some Small Cases". The link is attached below:

https://mp.csdn.net/mp_blog/creation/editor/129886839

This article is divided into two code segments, index.html and elli.css. Among them, I didn’t write much in the .css code segment. If you want a perfect page, you can set up the css file

3. Realize the effect

4. Implemented code and functions

1.index.html

The following defines the input box for the name and student number in the student basic information table

<li>

<label>姓      名：</label>

<input class="right" type="text" value="your name" maxlength="6">

</li>

<li>

<label>学      号：</label>

<input class="right" type="text" value="" maxlength="6">

</li>

The following uses a calendar to define the enrollment dates in the student's basic information table

<li>

<label>Enrollment date:</label>

<input class="right" type="date">

</li>

The gender option in the student basic information table is defined below

<li>

<label>性      别：</label>

<input type="radio" name="sex"/>

<label for="nan">男</label>

<input type="radio" name="sex"/>

<label for="nv">女</label>

</li>

The following defines the secondary colleges and majors in the student basic information table in the form of multiple choice and single choice

<li>

Secondary College:

<select>

<option>-Please select-</option>

<option selected="selected">School of Information Engineering</option>

·······································

</select><br /><br />

</li>

<li>

Major:

<select multiple="multiple" size="3">

<option>Software major</option>

························································

</select>

</li><br />

The class selection in the student basic information table is defined below

<li>

<label for="">Class:</label>

<input type="checkbox">Software 202101 class

<input type="checkbox">Software 202102 class

<input type="checkbox">Software 202103 class

</li>

The following defines the remark information options in the student basic information table

<li>

<label>Remarks:</label>

<textarea name="opinion" cols="50" rows="15"></textarea>

</li>

Finally, the submit reset button in the student basic information table is defined

<li></label><br />

<input type="submit">

<input type="reset">

</li>

2.elli.css

The height between each line in uili is set here. At the same time, the biggest function of padding and margin is to remove the small dots in front of each line of text. If there is each, it will be the effect of the picture below

ul,li {

padding: 0;

margin: 0;

height: 55px;

}

At this point, the case of the student basic information form is finished. The following is the complete code

5. The complete code of the case

1.index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>学生基本信息表案例</title>
  <link rel="stylesheet" href="css/elli.css"   />
</head>

<body>
  <form>
    <h2>学生基本信息表</h3>    
    <ul>
      <li>
        <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
        <input class="right" type="text" value="您的姓名" maxlength="6">
      </li>

      <li>
        <label>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
        <input class="right" type="text" value="" maxlength="6">
      </li>

      <li>
        <label>入学日期：</label>
        <input class="right" type="date">
      </li>

      <li>
        <label>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
        
        <input type="radio" name="sex"/>
        <label for="nan">男</label>
        
        <input type="radio" name="sex"/>
        <label for="nv">女</label>
      </li>

      <li>
        二级学院：
        <select>
          <option>-请选择-</option>
          <option selected="selected">信息工程学院</option>
          <option>机电工程学院</option>
          <option>土木工程学院</option>
          <option>财经管理学院</option>
          <option>旅游管理学院</option>
          <option>建筑经济学院</option>
          <option>环境工程学院</option>
          <option>工商管理学院</option>
        </select><br /><br />
      </li>

      <li>
        所学专业:&nbsp;&nbsp;
  <select multiple="multiple" size="3">
    <option>软件专业</option>
    <option>大数据专业</option>
    <option>计算机网络专业</option>
    <option>虚拟现实专业</option>
    <option>人工智能专业</option>
  </select>
      </li><br />

      <li>
        <label for="">班级：</label>
          <input type="checkbox">软件202101班
          <input type="checkbox">软件202102班
          <input type="checkbox">软件202103班
      </li>
      <li>
        <label>备注：</label>
        <textarea name="opinion" cols="50" rows="15"></textarea>
      </li>

      <li></label><br />
        <input type="submit">
        <input type="reset">
      </li>
    </ul>
  </form>
</body>
</html>

2.elli.css

ul,li {
  padding: 0;
  margin: 0;
  height: 55px;
}

Learn about the HTML5 form function method through the case of the student's basic information form

I. Introduction

2. Knowledge point explanation and code structure

3. Realize the effect

4. Implemented code and functions

1.index.html

2.elli.css

5. The complete code of the case

1.index.html

2.elli.css

Guess you like