Hello dear friends. In this video, we will examine the Form Elements in JSF. Let's begin. Open your project. In this project, we will show the most popular elements in JSF. In this video, we will look at elements and in the following videos, we will create a small project with JSF. First, we will start with form. With 'h' look, we can see all elements. There are many elements in h tag and we will try to explain the most useful of these elements. Select 'form'. You might ask yourself, "Why did we start with form?"

The answer is simple. Because input elements need a form in JSF. In HTML, you can add any input to your page without any form but in JSF validations will give an error. So, form element is very important. There is no difference with the HTML form tag. With control space shortcut, you can see all attributes of any element. In JSF, you can give a class or an ID to your form. Let's give a title to our form. Now, let's go on with label output. This tag is a label tag that we can use to show some text to users. We will give it the text value, 'First Text Area'.

Now it's important to remember for every change we make, we first have to save the file and then republish our server. Run. Great, our text has appeared on the page. As you can see, there are many attributes in output label but we will use only value. Maybe in following videos, we can use 'for' attribute also but for now we don't use this. Now, let's look output text also. Add an output text. It is used to render a plain text. You can think of output text like a label in HTML. The value property is the text area that we want to show with this element. Also, each element has an ID or class or style attribute. So, why not say these attributes again and again? Let's see in the page. Look, our output text is here. If you want, let's add tag a br tag to see better. Try again. There is no difference between output label and output text. Let's now move on to panel grids. For panels, we can use panel grid. In this element, we can define columns. For example, I want to add two columns. Now let's move them into the grid. If you want, we can adjust order.

Set 1 as the value and run again. And as you can see, the better view. You could also give it a background color. Now, let's move on to input text tags. Input text. As you know, the input tag allows us to take any data from the user. Just like the HTML input tag, it also has a lot of attributes. For example, we can give it an ID. The ID attribute is very important and we will assign an ID to each element for use in operations or class name. Let's set max length. As you know, alt the alternate textual description of the element rendered by this component. We can obtain value from the user through the value attribute. To store data, we will use managed themes, like new managed name, or let's change the name to Author. Done. We can use read only to close right options. Required attribute provide us to make sure that input is filled. For required, we can also add a special message for any element. For example, this area must be filled. Now for this required message, we can use message tag. Message for now, we have to set element ID. Done. Now we have to change column size with three because in name area, we have three elements but for labels there are two. Done.

For CSS, you can also set style. I will add a button to show required message. We didn't learned yet but in the next video, we will examine the button. For now, I will only add. Now let's try. Now run page. And look, our input is here and we cannot write anything. Let's delete read only and look again. Now we can use. Now click button and look, we can see our message. If you want, you can create a new CSS and use as class in this message but I will use it in the project. In HTML, we have a hidden property, but in JSF, hidden is not a property. For hidden input, we have to use input hidden tag. All properties are same with input. Only this input is not seen. Let's copy. Change with input hidden. Now run again. Look, we have two inputs in page but we can see only one of them. Let's go on with input text area. This is like an input but we can think that this is a big input. Set the value to the surname area and managed beans. The text area has all the attributes of the input. Except these, we can also resize our text area. Let's look. In JSF, there is no table component. For table, we will use HTML table command when we need. Now let's take a break here. Next video, we will go on examining the form elements. See you in the next video.