Form post and get submission

form

The location where the action form is submitted, which can be a website or a request processing address

method: post /get submission method

input text input box input type = text name

input type = password password

input = submit

input = reset

The difference between get and post

Submit via get: We can see the submitted information in the url, which is not safe, but efficient

Post submission: relatively safe, transfer large files

<form action="1.我的第一个网页.html" method="post">
    <h1> 登陆 </h1>
    <p>账号<input type="text" name="account"></p>
    <p>密码<input type="password" name = "psd"> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

Various other element attributes

The default initial value in the value box

maxlength can write a few characters at most

size text box length

Other type attributes

Radio

Single box. Must write value, name.

value represents the value of the radio button

name is used to group and only one group can be selected, so it is single selection

checked The initial value is selected by default

<p>性别：
    <input type="radio" value="boy"name="sex"/>男
    <input type="radio" value="girl"name="sex"/>女
</p>

Checkbox

value

checked The initial value is selected by default

Name selection group The same group will be integrated into the same array

<p>爱好
    <input type="checkbox"value="sleep"name="hobby">睡觉
    <input type="checkbox"value="chat"name="hobby">聊天
    <input type="checkbox"value="game"name="hobby"checked>游戏
    <input type="checkbox"value="eat"name="hobby">吃饭
</p>

Button

value represents the content to be displayed in the button box

The image and submit have the same effect and the form will be submitted after clicking

submit submit button

reset Reset all, clear the form

<p>按钮:
    <input type="button"name="btn"value="点击变长">
    <input type="image"src="../resources/image/1.jpg">
</p>
<p>
    <input type="submit"value="提交">
    <input type="reset"value="清空表单">
</p>

Other tags in the form are not input

Drop-down box list box select option

selected indicates the default initial option

<p>国家
    <select name="country">
        <option value="china">中国</option>
        <option value="jp"selected>日本</option>
        <option value="usa">美国</option>
        <option value="uk">英国</option>
    </select>
</p>

Textarea

Need to submit the values inside need the name attribute

cols means column

rows represents the column

<p>反馈
    <textarea name="textarea"  cols="30" rows="10">意见反馈</textarea>
</p>

File domain type=file

<p>选择文件
    <input type="file"name="filename">
    <input type="button"name="btn"value="上传">
</p>

Function label

Labels with verification function

Email verification type=email

<p>邮箱：
    <input type="email"name="email">
</p>

If the input content does not have @ or there is no content after @, it will not be submitted

URL verification type = url

<p>URL:
    <input type="url"name="url">
</p>

Number verification type=number

<p>商品数量:
    <input type="number"name="num"max="99"min="1"step="1">
</p>

max min

step The step size up and down arrows control how much to increase each time

Slider type=range

<p>音量
    0<input type="range"name="volume"max="100"min="0">100
</p>

Search type = search

<p>搜索
    <input type="search"name="search">
</p>

There is a delete at the end of the search box, you can delete the content in the box

html form basics