Home > Developer > JavaScript
Web Front-end: html, web: html
I. Understanding the role of forms
1. web applications not only display data to users, but also provide users with a graphical user interface that can input data. The main function of a form is to provide a graphical user interface on the webpage, which has collected and submitted user input data.
2. html form elements and attributes can be divided into two types:
(1) define the overall structure of the form so that the browser can know the elements that process the form data;
(2) Create the elements of the input control.
3. Minimal Form Format
<Form> Minimum tag format (<form action = "form handler url" method = "get | post">)
4. http get Protocol
(Http://www.example.com/forums.cgi? Id = 1234 & data = guest)
Http post Protocol
The http post method sends the data encoded in the http data stream. Therefore, it is invisible to users. It is a safer way to transmit data, but it is difficult to implement. However, html forms and many other web technologies make it easy to pass data through post.
5. Use the input control
1 inpu: This element defines different controls using the type property, including text and password fields, check boxes, single quotes, submit and reset buttons, hidden domains and Images
2 select and option: Create a drop-down list
3 textarea: Create a text box with multi-line Input
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
<Table border = "1">
<Tr>
<Th colspan = "4" bgcolor = "aqua"> query ticket information </th>
</Tr>
<Tr>
<Td bgcolor = "#7fffd4"> query year: </td>
<Td> <select name = "year" id = "year">
<Option value = ""> 2014 </option>
<Option value = ""> 2015 </option>
<Option value = ""> 2016 </option>
<Select>
Ticket status
<Select name = "year" id = "year"> <option value = ""> </option>
</Select>
</Td>
<Td bgcolor = "#7fffd4"> fuzzy search: </td>
<Td> <input type = "text" id = "firstname">
</Td>
</Tr>
<Tr>
<Td bgcolor = "#7fffd4"> payment method: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "food" id = "food"> <td bgcolor = "#7fffd4"> Airline: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "food" id = "food"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> ticket handling: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "food" id = "food"> <td bgcolor = "#7fffd4"> unfinished matters: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "checkbox" name = "city" id = "sh"> <input type = "text" id = "firstname"/> </td>
</Tr>
<Tr>
<Td bgcolor = "#7fffd4"> credential status: </td>
<Td bgcolor = "# a9a9a9"> & nbsp; date of delivery & nbsp; & nbsp; </td>
<Td bgcolor = "#7fffd4"> ticketing agencies: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "food" id = "food"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> booking date: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text" id = "good"> <input type = "text"> <td bgcolor = "#7fffd4"> departure date: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text" id = "good"> <input type = "text"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> Invoice date: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text" id = "good"> <input type = "text"> <td bgcolor = "#7fffd4"> settlement of receivables: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "good" id = "good"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> ticket booking number: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text"> <td bgcolor = "#7fffd4"> accident status: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "good"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> country: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "good"> <td bgcolor = "#7fffd4"> Dynasty number: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> Ticket No.: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text"> <td bgcolor = "#7fffd4"> price code: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "text"> <button> Number of lines per page: </button>
<Input type = "text"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> Chengdu collection: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "checkbox" name = "city" id = "sh"> received & nbsp; pass
<Select name = "food"> </td>
<Td bgcolor = "#7fffd4"> reconciliation verification: </td>
<Td bgcolor = "# a9a9a9">
<Select name = "food"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> profit limit: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "checkbox"> <td bgcolor = "#7fffd4"> specified list: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "radio" id = "gender" value = "male"> Issue </input>
<Input type = "radio" id = "gender" value = "male"> collection </input>
<Input type = "radio" id = "gender" value = "male"> address </input>
<Input type = "radio" id = "gender" value = "male"> contact </input>
<Input type = "radio" id = "gender" value = "male"> sales </input>
<Input type = "radio" id = "gender" value = "male"> receipt 2 </input>
</Td>
</Tr>
<Tr>
<Th colspan = "4" bgcolor = "aqua"> refund options </th>
</Tr>
<Tr>
<Td bgcolor = "#7fffd4"> refund list: </td>
<Td bgcolor = "# a9a9a9">
<Input type = "checkbox"> </td>
<Td bgcolor = "#7fffd4"> not recorded: </td>
<Td bgcolor = "# a9a9a9"> <input type = "checkbox"> </tr>
<Tr>
<Td bgcolor = "#7fffd4"> not delivered: </td>
<Td bgcolor = "# a9a9a9"> <input type = "checkbox"> <td bgcolor = "#7fffd4"> refund handler: </td>
<Td bgcolor = "# a9a9a9"> <select name = "food"> </td>
</Tr>
<Tr>
<Th colspan = "4" bgcolor = "# ff7f50"> <button> OK </button> & nbsp; <button> exit </button> </th>
</Tr>
</Table>
</Body>
</Html>
<H1> title<P> paragraph </p><Blockquote> reference </blockquote><Ul> unordered list </ul><Ol> ordered list </ol><Dl> definition list </dl><Pre> predefined tags </per><Div> equivalent to area block </div><Span> for a paragraph </span>
<A> line element </a>Block-level elements and embedded ElementsBlock-level elements: div, blockquote, list elements (dl, ol, ul), fiekdset, from, h1-h6, hr, p, pre, table, etc]
[Embedded elements: span, a, img, label, all form input elements, iframe, object, etc]
1. If an embedded element is used, the next element is displayed at the subsequent position on the same row of the element.
2. If it is a block-level element, the next element is displayed in the next line of the browser.
3. The text in the element is represented in the default font of different sizes Based on the element level.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
